iOS 11修复了滚动输入错误+抖动

Question

iOS 11在固定容器more here内的输入存在问题，特别是在焦点上使用iOS 11 +键盘光标未对齐输入：

我有一个元素.rn-drawer应该固定在页面顶部，而页面内容的其余部分是可滚动的。 fixed元素包含一个输入。

.rn-drawer {
    position: fixed;
    transition: all 0.25s ease-in-out;
    display: flex;
    height: 260px;
}

只需将以下.iOS-fix应用于父/根容器，即可解决输入键盘错位问题。

.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%;
}

但滚动上有一个非常糟糕的抖动/断断续续，经过一些研究后我认为解决这个问题的方法是通过应用transformation来强制CSS中的GPU加速。

好的，这解决了这个抖动和固定输入对齐问题，但现在postion:fixed;上的.rn-drawer不再适用;因为转换会改变子元素的坐标系（因此我的抽屉不固定）。

position: sticky;会停止抖动，但输入错位也会出现同样的问题。

是否有任何可行的解决方案可以解决输入对齐错误，但也允许我的输入容器被修复并且不会导致滚动时出现任何抖动？

感谢。

Answer 1

我对模态有类似的问题。我发现这篇文章可能有所帮助：https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8。虽然这3个建议的修复程序中没有一个是足够好的。

有趣的是，这个问题在iOS Safari，Chrome上重现，但不是Dolphin ......