时间戳

首页 > 解决方案 > Safari 网页检查器元素闪烁

css - Safari 网页检查器元素闪烁

问题描述

我遇到了一个奇怪的野生动物园错误。该错误是可视的，某些样式没有显示出来，但是当我在网络检查器中检查时，我注意到受影响的元素正在闪烁。

看起来他们正在从反应中安装和卸载，但情况并非如此，因为 js 检查器显示没有任何事情发生。

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

什么可能导致这种情况？

附上截图。

谢谢！

在此处输入图像描述

环形

标签： cssreactjssafariflicker

解决方案

问题

这是由常见的 CSS 重置和 Webkit 呈现伪元素的方式最近发生的变化引起的。你的css中可能有类似的东西。

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

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

修复

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

为什么会发生

我相信分配的属性会*:before, *:after导致 Webkit 的最新版本在重绘发生时为所有元素评估这些伪元素。您可以通过使用 Web 检查器将任何样式规则添加到*:before, *:after选择器来在任何网站上重现此效果。当您调整大小时，将触发重绘，您会看到:before并:after闪烁进出，当浏览器评估伪元素时，没有子元素的元素将短暂显示一个展开三角形。

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

推荐阅读