Safari Web检查器元素闪烁

Question

我遇到了一个奇怪的野生动物园错误。该错误是可见的，某些样式没有显示，但是当我在Web检查器中检查时，我发现受影响的元素在闪烁。

它们似乎正在从反应中安装和卸载，但事实并非如此，因为js检查器显示没有任何反应。

相反，它表明样式无效，然后在循环中重新计算。

这可能是什么原因造成的？

附带的屏幕截图。

谢谢！

Answer 1

问题

这是由于常见的CSS重置以及Webkit渲染伪元素的方式最近有所更改而引起的。您可能在CSS的某处有这样的内容。

*:before, *:after {
  box-sizing: border-box;
}

任何属性都会触发此错误，但是box-sizing很常见，因为它是引导程序脚手架重置的一部分。

修复

删除*:before, *:after的所有样式规则。您不能使用级联来覆盖这些样式，因为此选择器的任何样式规则都会触发该错误。

为什么会发生

我相信，分配给*:before, *:after的属性会使Webkit的最新版本在重绘时对所有元素评估这些伪元素。您可以使用网络检查器在*:before, *:after选择器中添加任何样式规则，从而在任何网站上重现这种效果。调整大小时，将触发重新绘制，并且您会看到:before和:after忽隐忽现，当浏览器评估伪元素时，没有子元素的元素会短暂显示一个扩展三角形。

在包含大量元素的页面上，这会导致Webkit浏览器中的性能问题，因为它有效地使重新绘制期间评估的元素数量增加了三倍。