flex box 会在 Firefox 上导致渲染问题吗？ [关闭]答案

【问题标题】：Do flex boxes cause rendering issues on Firefox? [closed]flex box 会在 Firefox 上导致渲染问题吗？ [关闭]
【发布时间】：2015-04-04 19:39:46
【问题描述】：

有谁知道是什么导致 Firefox 闪屏？它会在短时间内变黑。我认为这是“回流”，但我不知道是什么原因造成的。

我尝试了禁用过渡、自定义字体、渐变，但它仍然会发生。

可以是弹性盒子吗？因为我到处都在使用它们，而且在我切换到弹性盒子后，我注意到 FF 中有些滞后。

【问题讨论】：

我们需要更多的工作，你能发一个MCVE吗？
我用浮动替换了弹性盒子，现在一切都很顺利。因此，当您在页面上有 20-30 个嵌套的 flexbox 时，Firefox 似乎很糟糕，使用 flex-wrap :(
css-tricks.com/does-flexbox-have-a-performance-problem
@deebs CSS 技巧报告的减速是由于使用旧的display:box 而不是新的display:flex，据报道它与传统的浮动/块/表布局相当。
您的网站是否位于可以链接到我们的地方？

标签： javascript css firefox flexbox flicker

【解决方案1】：

我过去也遇到过同样的问题。如果你有很多元素相互嵌套display: flex，它实际上会使渲染时间加倍。

对我有用的解决方案是使用 display:-moz-box 而不是 display: flex

另外，我建议您重组 HTML 以减少嵌套级别并使您的标记尽可能精简

您可以在this bug report了解更多信息

【讨论】：

"使用 display:-moz-box 而不是 display: flex" 哎哟。谈论一个严重的回归。
太棒了。你的回答得到了我的投票，因为三件事：一个直接的解决方案（CSS）；更大的潜在优化修复（“去嵌套”）；以及有关同一问题的一些文档的链接。

【解决方案2】：

不确定您是否面临同样的问题，但我发现浏览器会在样式表中呈现注释掉的 CSS，然后将其禁用。我有一个页面有一个带有注释背景图像的类，它将加载该图像，将其闪烁，然后禁用 CSS。检查您的样式是否可能有注释的黑色背景颜色。

【讨论】：

我使用 Chrome 40.0.2214.111
只是为了帮助其他人解决这个问题，当页面加载速度较慢时，这种情况更为普遍。在文档呈现并准备好之前，它不会被禁用。

【解决方案3】：

您是否尝试过在常规设置中关闭硬件加速？

可能与您的视频卡有冲突。

可靠的来源是弹性盒子明确利用硬件加速来发挥作用。

【讨论】：

【解决方案4】：

试试这个：-

.container {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly      works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

使用您为其应用 flex 属性的选择器更改 .container。

【讨论】：

【解决方案5】：

选项->高级->常规->关闭硬件加速->确定

【讨论】：