Question

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

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

奇怪的事情：当div显示为基于％的定位（例如左：1％）时，框阴影未正确清除。一些遗留物仍然可见 - 参见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似乎没有这个bug

Answer 1

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

null transform hack

Answer 2

我遇到了同样的问题，并@fcalderan null transform hack修复了它。

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

真奇怪的盒子阴影转换错误

2 个答案: