Firefox 3.5 中的无样式内容 Flash (FOUC)
对于我们正在开发的新版本，我们已经力不从心，试图克服 Firefox 3.5.x+ 中令人讨厌且间歇性的 FOUC。
我们尝试过：
- 在 FF 中禁用 Javascript
- 通过删除 DOCTYPE 使用 Quirks 模式渲染
- 将额外 CSS 的
@import移动到 - 打开和关闭连接
- 删除 CSS一次一个来自 concat 的文件
- 中关闭本地缓存
- 在 Firefox等
我们之前的版本从未出现过任何 FOUC 问题，所以这是我们对此版本所做的事情。到目前为止，我们所做的更改包括：
- 对所有装饰图像使用通过数据 URI 进行 Base64 编码的图像，通过 CSS 提供服务。
- 将与“框架”相关的 CSS 文件与特定于页面的 CSS 分开，并将它们捆绑为两个单独的 CSS 文件
要重现问题...使用 Firefox 3.5.x 或 3.6.x，然后：
- 转到： http://my.publisher-subdomain.env.yola.net/
- 使用用户名登录：'[email protected]' 和密码：'stackoverflow'
- 登录后，您应该位于 http://my.publisher-subdomain.env.yola.net/sites/
- 单击主导航栏中的“帐户”链接。
- 帐户页面应该加载，并且您应该看到 FOUC。如果 FOUC 没有发生，请清除缓存并重新加载页面。
我们将非常感谢您的帮助！ :)
更新：
开发环境仍在展示 FOUC，但前提是 FireFox 内存不足或安装了很多扩展。延迟和渲染速度肯定会影响 FOUC 的可见性。
We've reached the end of our tether here trying to overcome a nasty and intermittent FOUC in Firefox 3.5.x+ for a new release we're working on.
We've tried:
- Disabling Javascript in FF
- Using Quirks mode rendering by removing the DOCTYPE
- Moving from
@importfor additional CSS to<link> - Switching concatenation on and off
- Removing CSS files from the concat, one at a time
- Switching the local cache off in Firefox
- etc
Our previous release never exhibited any FOUC issues, so it's something we've done to this release. Changes we've made so far include:
- Using Base64 encoded images over Data URIs for all decorative imagery, served via CSS.
- Separating 'framework'-related CSS files from page-specific CSS and bundling them as two separate CSS files
To recreate the problem... use Firefox 3.5.x or 3.6.x, then:
- Head on over to: http://my.publisher-subdomain.env.yola.net/
- Login with username: '[email protected]' and password: 'stackoverflow'
- Once logged-in, you should be at http://my.publisher-subdomain.env.yola.net/sites/
- Click the Account link in the main nav.
- The Account page should load, and you should see a FOUC. If the FOUC does not occur, clear your cache and reload the page.
Your help would be greatly appreciated! :)
UPDATE:
The dev environment is still exhibiting the FOUC, but only if FireFox is running low on memory or has a lot of extensions installed. Latency and rendering speed definitely affect the visibility of this FOUC.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
虽然这是一个非常古老的问题，但我在寻找同一问题的解决方案时发现了它。所以，我想将解决方案发布出来以供将来参考。我只需要把对 CSS 文件的引用移到我的标头中对外部 Javascript 的引用上方。
Although this is a very old question, I found it when I was searching for a solution to the same problem. So, I wanted to post the solution for future reference. I just needed to move the reference to my CSS files above the references to external Javascript that needed to be in my header.
我可能是错的，但这可能是并发连接问题。根据我的 Firebug 的“Net”选项卡
HTML 页面需要花费大量时间来加载 - 也许也是因为它在开发服务器上？ - 样式表在 HTML 页面之后加载。
我不能声称完全理解这里发生的事情，但我会尝试将样式表放入不同的域作为第一个措施。这应该会让 Firefox 立即建立连接。
返回到普通图像而不是 data: URI 可能也是一个好主意 - 这会减少样式表的大小，并且 data: URI 在 IE << 中根本不起作用。 8.
I can be wrong, but this could be a concurrent connections issue. According to my Firebug's "Net" tab
the HTML page simply takes a lot of time to load - maybe also because it is on a development server? - and the style sheet gets loaded after the HTML page.
I can't claim to entirely understand what's happening here, but I would try putting the style sheet onto a different domain as a first measure. That should make Firefox establish a connection straight away.
It would probably also be a good idea to go back to normal images instead of data: URIs - that would reduce the size of the style sheet, and data: URIs won't work at all in IE < 8.