1

我们已经走到了尽头，试图克服 Firefox 3.5.x+ 中令人讨厌和间歇性的 FOUC，我们正在开发一个新版本。

我们尝试过：

  • 在 FF 中禁用 Javascript
  • 通过删除 DOCTYPE 使用 Quirks 模式渲染
  • 从@import额外的 CSS 移动到<link>
  • 打开和关闭串联
  • 从 concat 中删除 CSS 文件，一次一个
  • 在 Firefox 中关闭本地缓存
  • ETC

我们之前的版本从未出现过任何 FOUC 问题，所以这是我们对这个版本所做的事情。到目前为止，我们所做的更改包括：

  • 通过 CSS 提供的所有装饰性图像在数据 URI 上使用 Base64 编码图像。
  • 将与“框架”相关的 CSS 文件与特定于页面的 CSS 分离，并将它们捆绑为两个单独的 CSS 文件

要重现问题...使用 Firefox 3.5.x 或 3.6.x，然后：

  1. 前往： http: //my.publisher-subdomain.env.yola.net/
  2. 使用用户名登录：'stack@yola.com' 和密码：'stackoverflow'
  3. 登录后，您应该在http://my.publisher-subdomain.env.yola.net/sites/
  4. 单击主导航中的帐户链接。
  5. Account 页面应该会加载，并且您应该会看到一个 FOUC。如果 FOUC 没有发生，请清除缓存并重新加载页面。

您的帮助将不胜感激！:)

更新：

开发环境仍在展示 FOUC，但前提是 FireFox 内存不足或安装了很多扩展。延迟和渲染速度肯定会影响这个 FOUC 的可见性。

4

2 回答 2

6

虽然这是一个非常古老的问题，但我在寻找相同问题的解决方案时发现了它。因此，我想发布解决方案以供将来参考。我只需要将对我的 CSS 文件的引用移动到需要在我的标题中的对外部 Javascript 的引用之上。

于 2012-02-19T04:55:12.110 回答
0

我可能是错的，但这可能是并发连接问题。根据我的 Firebug 的“网络”标签

替代文字

HTML 页面只是需要很长时间才能加载 - 也可能是因为它位于开发服务器上？- 在 HTML 页面之后加载样式表。

我不能声称完全理解这里发生了什么，但我会尝试将样式表放到不同的域中作为首要措施。这应该使 Firefox 立即建立连接。

回到普通图像而不是 data: URI 可能也是一个好主意 - 这会减小样式表的大小，而 data: URI 在 IE < 8 中根本不起作用。

于 2010-09-30T18:58:22.673 回答