Safari Mobil iFrame内容未在视图之外呈现

Question

问题

在iPhone上打开https://run.plnkr.co/preview/cjt4eonvv00043e5jhlqw9olb/，第二个iFrames div内容在点击/滚动之前不会显示。

视频：https://youtu.be/opEx0HMBvWc

细节

我有一个小部件<iframe>在页面加载页面折叠下面呈现。

<iframe class="iframe" src="widget.html"></iframe>

它正在我的控制下加载一个站点，我想在顶部粘贴/固定元素，并在下面添加动量滚动内容。由于固定元素，我无法在父页面中应用包装div并模拟此处所述的滚动https://stackoverflow.com/a/32993873/9619535。

另一种方法是使iframe在position:fixed等内部滚动，如下所述：https://github.com/PierBover/ios-iframe-fix / https://stackoverflow.com/a/54988720/9619535

但是如果iFrame在页面加载时不在视图范围内，则不会呈现此div的内容。只有在第一次触摸后才会出现内容：https://gist.github.com/arichter83/a056b127a7ebd3cb04062f172cb45df6

调试

使用XCode Simulator也可以复制bug。使用Safari Inspect元素就在那里，所有的CSS似乎都很好：

解决方法！？

当使用-webkit-overflow-scrolling: auto;而不是touch时，错误不会出现，但是动量滚动对于触觉可用性是期望/必不可少的。

相关问题

还链接到这里：https://github.com/PierBover/ios-iframe-fix/issues/5

这些解决方案没有帮助：

• Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone - > webkit-transform: translate3d(0, 0, 0);没有改变它
• Safari ios iframe blank screen on rotate - >没有使用display:flex

Answer 1

问题来自https://github.com/PierBover/ios-iframe-fix的position:fixed;top:0px等。

使用包装器上的height:100%可以实现相同的效果，并且不会发生错误：

  .scrollable {
    overflow-y: scroll;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }

通过https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios

Answer 2

首先设置-webkit-overflow-scrolling: auto;，然后在第一次触摸后切换到touch似乎工作90％：

<script type="text/javascript">
const el = document.getElementsByClassName('scrollable')[0]
const settouch = (e) => el.style.webkitOverflowScrolling = 'touch' 
el.addEventListener("touchend", settouch, false);
</script>

但是10％：如果iFrame呈现在折叠下方并且用户向上滚动iFrame没有反应的位置（已经在页面顶部），则包含的页面将滚动，touchend将触发并且div将不再呈现。

观看视频：https://youtu.be/opEx0HMBvWc