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问题

Answer 2

使用 iOS 8 ，引入了一个新的更快的Web视图组件：WKWebView。 Safari使用它。

与合成图层相关联的页面卸载问题。在iOS 8下使用Safari时，位置固定元素消失了：）
我还会比较iOS 8下的常见UIWebView和新WKWebView。使用UIWebView显示html / web内容的应用仍会受到问题的影响：（

Safari iO7：使用css硬件加速时页面转换闪烁

2 个答案: