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

前端之家收集整理的这篇文章主要介绍了javascript – 真的很奇怪的盒子阴影转换错误前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

当鼠标悬停在div上时,会应用带阴影的阴影(黑色,5px展开).
当使用光标离开div时,Box-shadow spread再次设置为0px.

奇怪的是:当div显示为基于%的定位(例如左:1%)时,框阴影不会被正确清除.一些遗留物仍然可见 – 参见JSFiddle中的红色div.

它变得更奇怪:剩下的盒子阴影的位置和形状各不相同.它似乎与屏幕宽度有某种关系.在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

我在这里遗漏了什么或这是一个错误吗?

PS:Chrome和Opera中存在此行为. Firefox似乎没有这个bug

最佳答案
通过添加transform:translate3d(0,0);对于元素,bug似乎消失了(这叫做null transform hack)

07001

猜你在找的HTML相关文章