javascript - 由于早期重新绘制，Safari 9.0.3 在 window.scrollTo() 上出现闪烁问题

Question

我在 Safari 中遇到了奇怪的行为。

在内容相当丰富的页面上，根据特定的用户操作(需要重新布局和替换页面上的元素)，我几乎重建整个文档，然后调用 window.scrollTo() 进行移动视口(viewport)到计算点。

隔离问题时，我发现在 window.scrollTo() 之前发生重绘(即使 JavaScript 仍在执行!)，然后执行滚动导致闪烁。

文档首先以新布局显示，然后一帧后(以新布局)显示在新位置。

我探索了各种“Safari 闪烁”问题(和答案)，但没有一个涵盖我遇到的问题。

Answer 1

所描述的行为显然是 Safari 的一个错误，因为重绘必须不会发生，直到 JavaScript 执行终止。

网页有纯色背景。经过一番实验，我发现使用图像作为背景而不是纯色可以解决问题。

主文档大小<div>有这个背景 CSS 属性:

background: #eee;

用内联png(相同颜色的小方 block )替换它

background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABlJREFUeNpifPfuHQMpgHFUw6iG4asBIMAAYmAssRRucYsAAAAASUVORK5CYII=") fixed repeat;

避免虚假重画并消除闪烁。