iframe - DOM 操作后 iOS 13 iframe 单击区域损坏

Question

我在 iPad 上遇到了一些异常行为，页面上元素的点击区域偏离了它们的实际呈现位置。

这只是在升级到 iOS 13+ 后才开始，在 iOS 12 上该行为正常。

似乎涉及到几个因素:

• 这只会影响 iframe 中的内容。
• 必须操纵 DOM，使整体高度发生变化。
• 奇怪的是，这似乎在多个浏览器中都被破坏了 - 在 Safari、Chrome 和 Firefox 中进行了测试。

可以在此处看到它的一个孤立示例 https://codepen.io/labepiniimailwebtop/full/mddEpjP (如果你的 iPad 屏幕太大以至于页面加载时没有滚动条，那么只需将图像调高)。 Screen recording of the problem.

页面上的代码(在 iframe 中加载)很简单:

<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
Scroll down
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<img src="https://placehold.it/200x600" />
<br />
<button>Click me</button>

<script>
$('button').on('click', function(){
    $('img').remove();
});
</script>

有没有人遇到过同样的问题，有什么解决办法吗？我想这是一个需要由 Apple 解决的问题，但同时想知道我可以做些什么来确保一切正常。

Answer 1

我找到了解决此问题的 hack。使 iframe 向上滚动到顶部似乎使点击区域重新定位正确。所以你可以在元素被移除后添加 window.scrollTo({top: document.body.scrollTop});。

我 fork 你的 codepen 来演示修复:https://codepen.io/avrame/pen/xxxBqWY