ios - iOS 11修复了滚动输入错误+抖动
<p>iOS 11与固定容器内的输入有问题，特别是与iOS 11对焦+键盘光标与输入不对齐：<br><a href="https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8" rel="noreferrer noopener nofollow">more here</a><br>我有一个元素<code>.rn-drawer</code>应该固定在页面顶部，而页面内容的其余部分是可滚动的。固定元素包含一个输入。<br><pre><code>.rn-drawer {
position: fixed;
transition: all 0.25s ease-in-out;
display: flex;
height: 260px;
}
</code></pre><br>通过简单地将下面的<code>.iOS-fix</code>应用到父/根容器，我可以解决输入到键盘的不对中问题。<br><pre><code>.iOS-fix {
position: fixed; // causes jitter on scroll, but resolves fixed input alignment bug
/*position: sticky; // no jitter, but doesn't resolve fixed input alignment bug*/
/*transform: translate3d(0, 0, 0); // no jitter + resolves fixed input alignment, BUT loses fixed position on children (like .rn-drawer)*/
overflow-y: scroll;
height: 100%;
width: 100%;
}
</code></pre><br>但是滚动条上有一个非常糟糕的抖动/结巴，经过一些研究，我相信解决这个问题的方法是通过应用<a href="/image/FVpbe.png" rel="noreferrer noopener nofollow"><img src="/image/FVpbe.png" alt="enter image description here"/></a>来强制css中的gpu加速。<br>好的，这解决了这个抖动和固定的输入对齐问题，但是现在<code>postion:fixed;</code>上的<code>.rn-drawer</code>不再适用；因为转换改变了子元素的坐标系（因此我的抽屉没有固定）。<br><code>position: sticky;</code>停止抖动，但与输入不对中的问题相同。<br>是否有任何可行的解决方案，将解决输入对齐错误，但也允许我的输入容器是固定的，不会造成任何滚动抖动？<br>谢谢。</p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p>我对模态也有类似的问题。我发现这篇文章可能有帮助：<a href="https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8" rel="noreferrer noopener nofollow">https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8</a>。不过，在imo看来，这3个建议的修复方法都不够好。<br>有趣的是，这个问题复制了iOS Safari，Chrome，但不是Dolphin…</p>
<p style="font-size: 20px;">关于ios - iOS 11修复了滚动输入错误+抖动，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/47084104/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/47084104/
</a>
</p>
页:
[1]