ios - 带有 -webkit-overflow-scrolling :touch inside iFrame not working in iOS 10 mobile Safari 的可滚动 Div

Question

我有一个包含 div 的 iFrame，它应该是可滚动的(只是 div，而不是整个 iFrame)。现在这在大多数浏览器中都可以正常工作，但在 iOS 10(使用 iPhone 7 测试)中却不行，其中没有任何东西是可移动的: https://codepen.io/arichter83/full/OJLNjey

修复 iFrame 之外的问题

将 -webkit-overflow-scrolling:touch;overflow-y:scroll;height:300px 添加到 iFrame 本身时，它起作用了:https://codepen.io/arichter83/full/xxKVpbL

但这似乎是 iOS 10 的一个错误，因为如果将这些参数添加到除 iFrame 之外的其他 div 中，它也会起作用:https://codepen.io/arichter83/full/PoYNEoX

在 iFrame 内部修复

但实际上我的情况是，我无法控制 iFrame 之外的内容，所以有人知道解决方法吗？

我试过:

1. 切换到 -webkit-overflow-scrolling:auto;
2. 添加 -webkit-transform: translateZ(0); 或 -webkit-overflow-scrolling: touch; transform: translate3d(0, 0, 0); 到 body

Answer 1

过去在处理 iOS 时，我强制 body 上的硬件加速来处理滚动问题。

body { 
  -webkit-overflow-scrolling: touch;
  transform: translate3d(0, 0, 0);
}

没有足够的积分来添加评论 - 我想这可能会有帮助。