这是我的测试CSS:
.btn {
display: block;
height: 30px;
width: 30px;
background-color: red;
position: relative;
}
.btn:hover {
box-shadow: 0 0 0 1px black;
text-shadow: 0 0 1px black;
}
应用于带有“btn”类的简单 div。使用 Firefox 的 28 Web Developer Console 我发现每次鼠标悬停在 div 上时都会执行 1 次重排,而当鼠标不再悬停在 div 上时会执行另一次重排。
如果我将“位置”属性从“相对”更改为“绝对”,则没有任何变化,如果我停用“文本阴影”或“框阴影”属性也不会改变。我发现不会触发两次重排的唯一方法是禁用“box-shadow”和“text-shadow”属性。
为什么会发生这种情况以及如何避免执行两次回流?