iscroll
iscroll copied to clipboard
Blinking caret/cursor doesn't scroll with it's Input text form element
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.
We did. You found a solution?
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');
}
});
ah! this is smart :)
Thanks for the fix!
Related
- https://gist.github.com/1362093
- http://stackoverflow.com/a/3485654/1422124
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.
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();
});
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.
当页面滚动时,让input失去焦点就ok了~
@Liuxiyu-tivd 然后滚动停止 再获得焦点么?那不是还要获取当前焦点的input存起来。。。感觉在给自己找事。。。