gabrielmaldi gabrielmaldi - 1 month ago 19
iOS Question

Mobile Safari - Input caret does not scroll along with overflow-scrolling: touch

I know that Mobile Safari won't fire events while in "momentum" (-webkit-overflow-scrolling: touch;) scrolling. But this is not entirely the same thing, because Safari handles the (blinking) caret of an input internally.

<div id="container">

<input type="text"></input>

<div class="filling"></div>

</div>

#container {
position: absolute;
top: 20px;
bottom: 20px;
width: 50%;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
border: 1px solid black;
}

input {
margin-top: 60vh;
}

.filling {
height: 200vh;
}


Try this fiddle on your device (focus the input and then scroll): http://jsfiddle.net/gxT3w

The issue also happens when you keep your finger pressed (i.e. not only when giving it momentum and releasing): the caret fails to scroll.

Obviously I don't want to turn off overflow scrolling, if there's no way to fix the caret so it will scroll correctly, it would be OK to hide it.

Thanks

Answer

This is indeed a WebKit bug and there seems to be no known workaround.

@cvrebert filed the bug: