Safari Mobil iFrame内容超出视野未呈现 [英] Safari Mobil iFrame content out of view not rendered

问题描述

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

Open https://run.plnkr.co/preview/cjt4eonvv00043e5jhlqw9olb/ on iPhone and the second iFrames div content ist not shown before tapping/scrolling.

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

我有一个窗口小部件<iframe>，该窗口小部件在页面加载时呈现在页面折叠下方.

I have a widget <iframe> that is rendered below the page fold on page load.

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

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

It is loading a site under my control, where I want a sticky/fixed element on top and momentum scrolled content below. Because of the fixed element I can not apply a wrapping div in the parent page and simulate the scrolling as described here https://stackoverflow.com/a/32993873/9619535.

替代方法是使iframe用position:fixed等在内部滚动，如下所述: https://stackoverflow.com/a/54988720/9619535

The alternative is to make the iframe scrolling inside with position:fixed etc. as described here: https://github.com/PierBover/ios-iframe-fix / https://stackoverflow.com/a/54988720/9619535

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

But the content of this div is not rendered if the iFrame is out of view on page load. Only after the first touch the content appears: https://gist.github.com/arichter83/a056b127a7ebd3cb04062f172cb45df6

使用 XCode Simulator 也可以复制该错误.有了Safari Inspect，元素就在那里了，所有的CSS看起来都不错:

Using XCode Simulator the bug can also be reproduced. With Safari Inspect the element is there and all css seems fine:

使用-webkit-overflow-scrolling: auto;而不是touch时，该错误不会出现，但是动量滚动是理想的/对于触觉可用性至关重要.

The bug does not appear when using -webkit-overflow-scrolling: auto; instead of touch, but the momentum scrolling is desired / essential for the haptic usability.

也在此处链接: https://github.com/PierBover/ios -iframe-fix/issues/5

这些解决方案没有帮助:

These solutions didn't help:

• iOs5 iPad上的iframe内容无法滚动显示/iPhone -> webkit-transform: translate3d(0, 0, 0);并未更改
• Safari ios iframe旋转时出现黑屏 ->不使用display:flex

• Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone -> webkit-transform: translate3d(0, 0, 0); did not change it
• Safari ios iframe blank screen on rotate -> no display:flex is used

推荐答案

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

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

The same can be achieved with height:100% on the wrapper, and than the bug doesn't occure:

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

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

这篇关于Safari Mobil iFrame内容超出视野未呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！