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

【问题标题】：Safari iO7: flicker on page transition when using css hardware accelerationSafari iO7：使用 css 硬件加速时页面转换时闪烁
【发布时间】：2015-03-04 08:55:36
【问题描述】：

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

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

-webkit-transform: translate3d(0,0,0);
-webkit-overflow-scrolling: 触摸；

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

根据我所读到的内容，我推测这可能与将 html 容器提升为层（因为它的硬件加速）有关，这会导致浏览器出现奇怪的渲染。

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

编辑：

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

我发现任何复合层似乎都会在页面加载时对我造成这种情况。

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

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

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

（抱歉，如果我的术语不正确，我对网络技术还是有点陌生）

【问题讨论】：

那么您的网站在没有-webkit-transform: translate3d(0,0,0); 和-webkit-overflow-scrolling: touch; 属性的情况下可以正常工作吗？
是的，但不幸的是，我需要这些属性来实现硬件加速和平滑滚动。我希望有一个解决方案可以让我保留它们？
听起来你才刚刚开始 - 但你应该尝试将你的网站作为单页 JS 应用程序运行 - 这样，页面不会像这样“重新加载”，而是像一个成熟的应用程序。这就是现代网站的创建方式，可帮助您避免此类问题，即整个页面在您浏览时被拆除并重新创建。

标签： ios css safari ios7.1 hardware-acceleration

【解决方案1】：

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

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

这些应该与您的：

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

属性。

希望这会有所帮助

编辑：请注意this 问题

【讨论】：

您好，非常感谢您的评论。我试了一下，似乎没有影响。我做了更多的实验，发现了一些有趣的结果。我用新的细节编辑了我最初的问题。如果您有任何想法将不胜感激！

【解决方案2】：

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

与复合层相关的页面卸载问题。在 iOS 8 下使用 Safari 时，位置固定元素消失了 :)
我还比较了 iOS 8 下常见的UIWebView 和新的WKWebView。使用UIWebView 显示html/web 内容的应用程序仍然受到问题的影响:(

【讨论】：