无法呈现Safari Mobil iFrame内容超出视野

Question

问题

在iPhone上打开https://run.plnkr.co/preview/cjt4eonvv00043e5jhlqw9olb/，并且在点击/滚动之前未显示第二个iFrame 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 也可以重现该错误。有了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的FUNCTION_NAME=cron-topic-listener gcloud functions deploy ${FUNCTION_NAME} --runtime go111 --trigger-topic cron-topic 等。

在包装器上使用position:fixed;top:0px可以实现相同的目的，并且不会发生错误：

height:100%

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

Answer 2

首先设置const regex = /((?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})) (?<hour>\d{2}):(?<minutes>\d{2}):(?<seconds>\d{2})/; const result = "1988-02-01 12:12:12".match(regex).groups; console.log(result) console.log(Object.values(result))，然后在第一次触摸后切换到-webkit-overflow-scrolling: auto; 似乎可以工作90％：

touch

但是10％：如果iFrame呈现在折叠以下，并且用户向上滚动而iFrame没有反应（已经位于页面顶部），则包含页面将滚动，触摸端将fire和div将不再呈现。

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