iOS 9` -webkit-overflow-scrolling：touch`和`overflow：scroll`打破了滚动功能

Question

我正在开发一个webapp，我在iFrame中有一个div，它有隐藏的，溢出的内容，我想要滚动。

在iOS 9上的Safar上，当我将-webkit-overflow-scrolling:touch;添加到div（已经有overflow-y: scroll;以使滚动感觉流畅时，它会断开并且根本不滚动。

我知道这是一个已知问题，但我找不到与我的方案相关的解决方案：我的iFrame不仅仅传输数据，它们实际上包含用户的内容。方向并不重要，内容总是需要滚动。

Answer 1

我刚刚在包含overflow: auto和-webkit-overflow-scrolling: touch的div中遇到动态内容。

肮脏，丑陋的解决方法：当添加到dom时，强制内部内容大于滚动div。像这样：

<div style="overflow: auto; -webkit-overflow-scrolling: touch;">
    <div style="min-height: 101%">
        dynamic content
    </div>
</div>

我的理论是Safari在添加-webkit-overflow-scrolling: touch时会尝试（需要）进行一些重大优化，而这些不适合某些类型的动态内容。

Answer 2

我还在iOS9上遇到了webkit-overflow-scrolling: touch这个问题。它可以在设备或iOS模拟器上重现。正如克里斯托弗·坎普斯所提到的，它只发生在动态内容上，即内容从小于可滚动容器变为大于容器。

Heres a CodePen demonstrating this issue，包括Christopher Camps修复。

Answer 3

这个Safari漏洞似乎是另一个黑客攻击是使用javascript设置style="overflow: none"并在之后立即将其重置为之前的值。