移动Safari - 输入插入符号不会随着溢出滚动滚动:触摸

Question

我知道Mobile Safari在"动量"(-webkit-overflow-scrolling:touch;)滚动时不会触发事件.但这并不是完全相同的事情,因为Safari在内部处理输入的(闪烁)插入符号.

<div id="container">
    <input type="text" />
    <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;
}

在您的设备上尝试这个小提琴(关注输入然后滚动):https://jsfiddle.net/gabrielmaldi/n5pgedzv

当你按下手指时(即不仅在给动量和释放时)也会发生这个问题:插入符不能滚动.

显然我不想关闭溢出滚动,如果没有办法修复插入符号以便它正确滚动,可以隐藏它.

谢谢

Answer 1

这确实是一个WebKit错误,似乎没有已知的解决方法.

@cvrebert 提交了错误:

• WebKit:https://bugs.webkit.org/show_bug.cgi ？ id = 138201
• Apple Radar:http://openradar.appspot.com/18819624

Answer 2

遇到了同样的问题，我的修复方法在

-webkit-overflow-scrolling: touch

和

-webkit-overflow-scrolling: auto

每当我聚焦/模糊输入时