Question

如果您使用Chrome浏览器访问iPad上的http://www.tekiki.com，该网站会首先呈现正常，但在一两秒后，网页上的所有文字都会隐藏，并在片刻之后重新显示。它几乎就像是文本的延长闪烁或闪烁。

在桌面上，这不会发生。

任何线索？我们尝试过 -webkit-backface-visibility：hidden ，但没有区别。也没有动画。

谢谢！

Answer 1

网站上有一些不遵循最佳做法的内容。

您的脚本应该是页面中的最后一个内容，就在关闭正文标记之前。你的头部有脚本，部分穿过身体，有些则在底部。

您应该将所有样式放在头部，并放在任何脚本之前（即使您不遵循建议的脚本放置）。您的字体的CSS放在两个脚本标签之后，这将导致加载字体被延迟，直到脚本被下载，解析和可能执行 - 这可能（确实）导致字体“闪烁”，因为字体正在装载延迟。此外，您在整个页面中都放置了样式标记，这可能会导致重新绘制，重排和闪烁。

您对头部和身体之间的IE应用样式有条件注释。样式在那里无效（我知道）。它们应该放在所有其他样式之后，但仍然在头部。

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

您也可以考虑缩小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 include移动到页面底部的脚本标记之前。

Answer 2

通过开发人员工具快速浏览页面告诉我，您的页面上有很多元素，显示设置为隐藏。在页脚的顶部，你有一个内联脚本运行一堆未包含在doc.ready调用中的jQuery。

在脚本的开头，你运行它：

var SHOW_PAGE = 'FEATURED';

// Determine which page to show and configure accordingly
// Hide page specific elements first
$( '.featured, .catalog, .category, .list' ).hide();

// Show right page
if ( SHOW_PAGE == 'CATALOG' ) {
$( '.catalog' ).show();
get_web_data();
} else if ( SHOW_PAGE == 'CATEGORY' ) {
$( '.category' ).show();
get_web_data();
} else {
$( '.featured' ).show();
get_featured_apps();
}

更改每个元素的显示将触发重绘，这在移动设备上可能是一项非常昂贵的任务。不知道这是不是你的问题，但可能是一个好的开始 - 在iOS上，chrome可能没有与safari @处理那些东西相同的性能。

Answer 3

重置您的浏览器缓存，然后重试。它在我的一些设备（iPad，iPhone，OSX）上测试得很好。

在iPad和Chrome上闪烁/闪烁网站文字（文字暂时消失然后重新出现）

3 个答案: