ios - Safari iO7 : flicker on page transition when using css hardware acceleration

Question

我遇到的问题是在使用 Safari 通过任何 iOS 7 设备查看我的网站时。每次我在我的网站上更改页面时，浏览器窗口都会变白，片刻之后页面开始正确呈现。

其他网站不这样做，所以在我苦苦思索了好几个小时之后，我将范围缩小到将一些 CSS 应用于我的页面容器。它通过以下方式强制硬件加速:

• -webkit-transform: translate3d(0,0,0);
• -webkit-overflow-scrolling: touch;

如果我删除该 css，则在我的网站上更改页面时，页面加载之间不会出现白色闪烁。不幸的是，我需要那个 css 来获得硬件加速和平滑滚动。

从我读到的内容来看，我推测它可能与 html 容器被提升到一个层有关(因为它的硬件加速)并且这在某种程度上导致浏览器呈现奇怪。

我找到了几篇关于此的文章，但没有对我有用的答案。有没有人遇到过这个问题，也许有解决方案？

编辑:

所以通过更多的实验和阅读，我有了更多的线索。

我发现任何复合层似乎都会导致我在页面加载时出现这种情况。

例如，我网站的菜单栏是position:fixed(这使它成为一个复合层)。当我使菜单不是position:fixed 时，在更改页面时，菜单栏没有“闪烁”。即页面的其余部分变白，片刻之后呈现新内容，但菜单栏继续呈现。

我的下一个实验似乎表明问题实际上是正在“卸载”的页面而不是正在加载的新页面。我的意思是:我像往常一样在我的容器上使用了 -webkit-overflow-scrolling: touch; css。我所做的不同之处在于，我写了一行 javascript 以在几秒钟后从容器中删除该 css 属性。现在，当我更改页面时，浏览器在呈现新页面之前不会变白。所以我认为这意味着它与 Safari 浏览器如何卸载具有复合层的页面有关。

谁能证实我的怀疑是否有道理，或者我是否完全误读了情况？

(如果我的术语不正确，我深表歉意，我对网络技术还是有点陌生​​)

Answer 1

我知道在某些情况下使用鲜为人知的 css 属性可以解决这个问题。所以尝试一下:

-webkit-perspective: 1000;    
-webkit-backface-visibility: hidden;   

这些应该与您的:

-webkit-transform: translate3d(0,0,0);
-webkit-overflow-scrolling: touch;   

属性。

希望对你有帮助

编辑:请注意 this问题