非常奇怪的盒子阴影过渡错误答案

【问题标题】：Really weird box-shadow transition bug非常奇怪的盒子阴影过渡错误
【发布时间】：2023-03-26 06:58:01
【问题描述】：

最近我偶然发现了一个非常奇怪的错误，用于转换盒子阴影......

将鼠标悬停在 div 上时，会应用带有过渡效果的框阴影（黑色，5px 展开）。当光标离开 div 时，box-shadow spread 再次设置为 0px。

奇怪的事情：当 div 以基于 % 的位置显示时（例如左：1%），box-shadow 没有被正确清除。它的一些残余物仍然可见 - cf。 JSFiddle 中的红色 div。

变得更奇怪了：剩余的盒子阴影的位置和形状各不相同。它似乎与屏幕宽度有关。在 JSFiddle 中，只需移动垂直调整大小栏并再次悬停...

CSS

.a, .b, .c, .d {
    margin: 5px;
    width: 100px;
    height: 100px;
    transition: box-shadow 0.2s linear;
    box-shadow: 0 0 0 0 black;
    position: relative;
}
.a, .b {
    background-color: #6c6;
}
.c, .d {
    background-color: #c66;
}
.b {
    left: 50px;
}
.c {
    left: 1%;
}
.d {
    left: 2%;
}
.a:hover, .b:hover, .c:hover, .d:hover {
    box-shadow: 0 0 0 5px black;
}

HTML

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

我在这里遗漏了什么还是这是一个错误？

PS：这种行为存在于 Chrome 和 Opera 中。 Firefox 似乎没有这个错误

【问题讨论】：

这是我从未见过的大故障。

标签： javascript html css

【解决方案1】：

通过在元素中添加transform: translate3d(0,0,0);，错误似乎消失了（这称为null transform hack）

Fork on JSFiddle

【讨论】：

是的，这解决了它。你是怎么想到这个的？
当您遇到渲染故障时，尝试 GPU 渲染并查看问题是否仍然存在可能会很有用：我过去遇到过几个像您这样的问题，我以这种方式解决了，所以这是一个轻松通话。
不幸的是，transform hack 导致我的网站上的文本模糊和不稳定的过渡，我无法在 JSFiddle 上重现。无论如何，这是另一个讨论。到目前为止，谢谢。

【解决方案2】：

我遇到了同样的问题，@fcalderan null transform hack 解决了它。

虽然它应该可以在没有它的情况下工作，因为它过去确实有效，但我搜索了 chrome 问题，发现它是一个报告的issue that should be already fixed in Chrome 67。

【讨论】：