移动Safari - 输入插入符号不会随着溢出滚动滚动：触摸 [英] Mobile Safari - Input caret does not scroll along with overflow-scrolling: touch

问题描述

我知道Mobile Safari在动量（-webkit-overflow-scrolling：touch;）滚动时不会触发事件。但这并不完全相同，因为Safari在内部处理输入的（闪烁）插入符号。

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" />
    <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;
}

在您的设备上试试这个小提琴（关注输入然后滚动）：< a href =https://jsfiddle.net/gabrielmaldi/n5pgedzv =nofollow noreferrer> https://jsfiddle.net/gabrielmaldi/n5pgedzv

Try this fiddle on your device (focus the input and then scroll): https://jsfiddle.net/gabrielmaldi/n5pgedzv

当你按下手指时（即不仅在给动量和释放时）也会出现问题：插入符号无法滚动。

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.

谢谢

推荐答案

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

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

@cvrebert 提交错误：

@cvrebert filed the bug:

• WebKit： https://bugs.webkit.org/show_bug.cgi?id = 138201


• Apple Rad ar： http://openradar.appspot.com/18819624

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

这篇关于移动Safari - 输入插入符号不会随着溢出滚动滚动：触摸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！