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

Question

问题

在 iPhone 上打开 https://run.plnkr.co/preview/cjt4eonvv00043e5jhlqw9olb/，第二个 iFrame div 内容在 tapping/scrolling.

之前未显示

详情

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

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

它正在加载一个由我控制的网站，我想要一个 sticky/fixed 元素在顶部，动量滚动内容在下方。由于固定元素，我无法在父页面中应用包装 div 并按照此处所述模拟滚动。

替代方法是使用 position:fixed 等使 iframe 在内部滚动，如下所述：https://github.com/PierBover/ios-iframe-fix /

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

调试

使用 XCode 模拟器 也可以重现该错误。使用 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

先设置-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

Answer 2

问题来自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

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

Safari Mobil iFrame content out of view not rendered

css

iframe

webkit

mobile-safari

问题

详情

调试

解决方法！？

相关问题