iframe的超时会导致滚动问题

Question

所以我在一个简单的停止手表运行的网站上嵌入了一个iframe。它不过是递归超时。但是，在那里进行的重复性DOM更改导致父网站的内容"闪烁"，而Inter Iframe网站则跳至顶部。这使得由于立即跳到页面上的iframe内容滚动。

这个问题似乎仅出现在移动浏览器中(在iOS Safari 10.3.2中进行了测试(，而间隔的持续时间无关紧要(每秒一次调用时相同的问题(。

递归超时

$('#starttimer').on('click', function(e) {
    loopTimer = function() {
        setTimeout(function() {
            $('#time').text('change');  /* DOM modifications seem to be the guilty part */
            loopTimer();
        }, 1);
    }
    loopTimer();
});

有人面临类似的问题，还是有人知道如何解决这个问题？

Answer 1

好吧，正如我已经提到的那样，这似乎是重新绘制iframe内容的问题，并且仅在ios Safari浏览器(以及移动chrome浏览器(中出现。

。

问题在于，浏览器在内容以某种方式更改后重新计算iframe的高度有问题。要解决这个错误，我要做的就是

a：要么在iframe的HTML和身体上分配100％高度，并使其能够溢出。

html,
body {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

b：或使用javaScript计算外部iframe的高度，并在内部内容更改时将值写为iframe元素上的inline型。

我希望这对那些为此iOS错误而苦苦挣扎的人有帮助。欢呼。