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

Posted 2023-03-12

【中文标题】iPad 和 Chrome 上的网站文本闪烁/闪烁（文本暂时消失然后重新出现）

【英文标题】：Blinking/flickering of website text (text disappearing for moment then reappearing) on iPad and Chrome

【发布时间】：2013-05-07 19:52:50

【问题描述】：

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

在桌面上，这不会发生。

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

谢谢！

【问题讨论】：

如果您在 Mac 中的桌面 Chrome 中打开页面，是否得到相同的结果？

您是否尝试删除对google font api的调用并查看问题是否存在？

【参考方案1】：

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

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

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

【讨论】：

如果可以的话，我会为你投票两次，这是一个非常好的答案，有很多很好的建议，可以让 html/CSS/JS 更加一致和高性能。

【参考方案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 @ 处理这些东西的性能不同。

【参考方案3】：

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

【讨论】：

抱歉，这意味着这只发生在 Chrome 上——而不是 Safari。您的 iOS 设备上有 Chrome 浏览器吗？谢谢！

你说得更详细一点。哈哈。这绝对只是一个与 Chrome 相关的问题。

是的，我们的错误。对不起。关于 Chrome 为何这样做的任何线索？这听起来像是 Chrome 的问题，但我们代码中的某些东西一定会触发它。顺便说一句，网站上的任何想法（如果没有，请不要担心，只是想问一下）。感谢您的帮助！

实际上，如果您从 iPhone 访问此页面，即使在移动 Safari 上也会看到闪烁：www.tekiki.com/dandy/dandy。有什么线索吗，MarkM？