0

如果您在 iPad 上使用 Chrome 访问http://www.tekiki.com，该网站一开始呈现良好，但一两秒后，页面上的所有文本都被隐藏并在片刻后重新出现。它几乎就像文本的扩展闪烁或闪烁。

在桌面上，这不会发生。

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

谢谢！

4

3 回答 3

5

您在网站上有一些不遵循最佳实践的内容。

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

您应该将所有样式放在头部，并放置在任何脚本之前（即使您不遵循推荐的脚本放置）。您的字体的 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 包含移动到页面底部的脚本标记之前。

于 2013-05-20T04:40:17.850 回答
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();
}

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

于 2013-05-20T17:31:15.243 回答
0

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

于 2013-05-07T21:08:49.750 回答