ios - iPad 和 Chrome 上的网站文本闪烁(文本消失片刻然后重新出现)

Question

如果您访问 http://www.tekiki.com在使用 Chrome 的 iPad 上，该网站起初呈现良好，但一两秒钟后，页面上的所有文本都被隐藏并在几分钟后重新出现。这几乎就像文本的长时间闪烁或闪烁。

在桌面上，这不会发生。

有什么线索吗？我们已经尝试过 -webkit-backface-visibility:hidden，但没有任何区别。也没有动画。

谢谢!

Answer 1

您网站上的一些内容未遵循最佳做法。

您的脚本应该是页面中的最后一个内容，就在结束正文标记之前。您在头部有脚本，部分通过 body ，还有一些在底部。

您应该将所有样式放在头部，并放置在任何脚本之前(即使您不遵循推荐的脚本位置)。您的字体的 CSS 放置在两个脚本标签之后，这将导致加载字体被延迟，直到脚本被下载、解析和可能执行——这可能(确实)导致字体“闪烁”，因为字体正在延迟加载。此外，您在整个页面中放置了样式标签，这可能会导致重绘、回流和闪烁。

在头部和主体之间，您有一个样式的条件注释以应用于 IE。样式在那里无效(我知道)。它们应该放在所有其他样式之后，但保留在头部。

从 scaffold.css 中删除 import 语句并将其直接放在页面上，以便浏览器可以并行而不是串行下载您的样式表，或者更好的是，将它们合并到一个文件中以减少请求数量。

您还可以考虑缩小 CSS 和 javascript。

实际上，我在看你的非移动页面，你的移动页面看起来好多了，但你应该扭转这些:

<!-- JQ -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

<!-- Misc -->
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>

先加载字体，再加载jquery。您也可以考虑将 jquery 包含移动到页面底部的脚本标记之前。