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

Problem

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

Video: https://youtu.be/opEx0HMBvWc https://youtu.be/opEx0HMBvWc

Details

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

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

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

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

但是如果iFrame页面加载时不可见。仅在第一次触摸后才会显示内容：https://gist.github.com/arichter83/a056b127a7ebd3cb04062f172cb45df6 https://gist.github.com/arichter83/a056b127a7ebd3cb04062f172cb45df6

调试

Using Xcode模拟器该错误也可以重现。使用 Safari Inspect，元素就在那里并且所有 css 看起来都很好：

解决方法！？

使用时不会出现该bug-webkit-overflow-scrolling: auto;代替touch，但是动量滚动对于触觉可用性来说是需要/必不可少的。

相关问题

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

这些解决方案没有帮助：

• iframe 内容未在 iOs5 iPad/iPhone 中的滚动下呈现 https://stackoverflow.com/questions/8912218/iframe-content-not-rendering-under-scroll-in-ios5-ipad-iphone -> webkit-transform: translate3d(0, 0, 0);没有改变它
• Safari ios iframe 旋转时出现黑屏 https://stackoverflow.com/questions/44503618/safari-ios-iframe-blank-screen-on-rotate?rq=1-> 没有display:flex is used

问题来自于https://github.com/PierBover/ios-iframe-fix https://github.com/PierBover/ios-iframe-fix 's position:fixed;top:0px etc.

同样可以通过以下方式实现height:100%在包装器上，并且没有发生错误：

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

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