gabrielmaldi gabrielmaldi - 8 months ago 53
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>


#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):

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.



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

@cvrebert filed the bug: