所以最近我偶然发现了一个非常奇怪的错误,它与转换盒子阴影有关......
当悬停在 div 上时,会应用带过渡的框阴影(黑色,5 像素扩展)。 当光标离开 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
最佳答案
通过向元素添加 transform: translate3d(0,0,0);
,错误似乎消失了(这称为 null transform hack )
关于javascript - 非常奇怪的盒子阴影过渡错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48748223/