真的很奇怪的是盒子阴影过渡错误

Question

所以最近我偶然发现了一个非常奇怪的错误，因为过渡了盒子阴影...

悬停在divs上时，将使用过渡施加盒子阴影(黑色，5px扩展(。当使用光标离开Divs时，盒子阴影酱再次设置为0px。

怪异的东西：当DIV以基于％的定位显示(例如左：1％(时，盒子遮阳均未正确清除。仍然可以看到一些残留物-CF。jsfiddle中的红色divs。

它得到怪异的：剩余的盒子阴影的位置和形状有所不同。它似乎与屏幕宽度有关。在JSFIDDLE中，只需移动垂直尺寸杆，然后再次悬停...

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似乎没有此错误

Answer 1

通过将 transform: translate3d(0,0,0);添加到元素中，该错误似乎消失了(这称为null变换黑客hack(

jsfiddle上的分叉

Answer 2

我有同样的问题，@fcalderan null变换hack修复了它。

虽然它应该没有它，因为它过去确实有效，但我搜索了Chrome问题，发现这是一个已报告的问题，应该已经解决了Chrome 67。