iscroll icon indicating copy to clipboard operation
iscroll copied to clipboard

Blinking caret/cursor doesn't scroll with it's Input text form element

Open indusbull opened this issue 13 years ago • 10 comments

HI

I've been using iscroll on our mobile pages from last six months and it was working fine even with form element hack. But suddenly now on iPhone, we have came across an issue with iscroll.

The scrollWrapper has 5-6 diff form elements. Click on one of the text input box, it gets focus and virtual keypad pops up. One can also blinking caret/cursor in input box. Now when we try to scroll the content in wrapper, all the elements within it scroll up/down except blinking caret. Caret doesn't move and even if the input box has moved from it's pre-scroll position. Basically the caret is not in sync with it. Now if you try to type something, caret jumps back inside the input box.

The issue is present in actual 3GS/4G device/emulator and all OS. I wish I can attach a snapshot of the problem here which would have made problem more clear.

Has anyone come across same issue?? Thanks.

indusbull avatar Jan 26 '12 23:01 indusbull

We did. You found a solution?

PabloFerroClover avatar Jan 02 '13 20:01 PabloFerroClover

I also have this problem. It is apparently related to the use of css transforms.

I have fixed it with this hack workaround that forces redrawing as you scroll to eliminte this issue: CSS:

input {
  text-shadow: rgba(0,0,0,0) 0px 0px 0px;
}
input.force-redraw {
  text-shadow: none;
}

JS:

myScroll = new iScroll('wrapper', { 
  onScrollMove: function() {
    $('input').toggleClass('force-redraw');
  }
});

rooby avatar Jan 07 '13 06:01 rooby

ah! this is smart :)

cubiq avatar Jan 07 '13 10:01 cubiq

Thanks for the fix!

PabloFerroClover avatar Jan 07 '13 15:01 PabloFerroClover

Related

  • https://gist.github.com/1362093
  • http://stackoverflow.com/a/3485654/1422124

Prinzhorn avatar Jan 07 '13 16:01 Prinzhorn

No worries, it doesn't fix the problem 100% but it makes it much less obvious. You can still see the cursor move a little bit in some cases.

rooby avatar Jan 07 '13 21:01 rooby

And for anyone using iScroll 5, you will need to create a little shim to get the scrollMove event exposed:

var originalMove = IScroll.prototype._move;
IScroll.prototype._move = function() {
    originalMove.apply(this, arguments);
    IScroll.prototype._execEvent.call(this, 'scrollMove');
}

and now you can use the new API to attach a scrollMove event. In this case, I am using a technique inspired by @rooby above to force a repaint:

$('body').on('focus.scroller', 'input', function(focusEv) {
    var style = focusEv.target.style;
    self.scroller.on('scrollMove', function() {
        if(style.textShadow === '') {
            style.textShadow = 'rgba(0,0,0,0) 0 0 0';
        } else {
            style.textShadow = '';
        }
    });
});

$('body').on('blur.scroller', 'input', function(focusEv) {
    focusEv.target.style.textShadow = '';
    self.scroller._events.scrollMove.pop();
});

DesignByOnyx avatar Nov 05 '13 19:11 DesignByOnyx

Despite @rooby correctly addresses the problem, his code is not a proper solution. onScrollMove is an event that is raised alot! Selecting all inputs and toggling a class will ruin your performance. Make sure you only select the focused input and use an ID selector if possible. However @DesignByOnyx seems to have a better performing workaround.

DibranMulder avatar Nov 29 '13 07:11 DibranMulder

当页面滚动时,让input失去焦点就ok了~

Liuxiyu-tivd avatar Oct 12 '17 07:10 Liuxiyu-tivd

@Liuxiyu-tivd 然后滚动停止 再获得焦点么?那不是还要获取当前焦点的input存起来。。。感觉在给自己找事。。。

vincent931018 avatar May 18 '18 04:05 vincent931018