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

概述所以最近我偶然发现了一个非常奇怪的错误,转换了一个盒子阴影......当鼠标悬停在div上时,会应用带阴影的阴影(黑色,5px展开).当使用光标离开div时,box-shadow spread再次设置为0px.奇怪的是：当div显示为基于％的定位(例如左：1％)时,框阴影不会被正确清除.一些遗留物仍然可见 - 参见JSFiddle中的红色div.它变得更奇怪

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

当鼠标悬停在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

总结

以上是内存溢出为你收集整理的javascript – 真的很奇怪的盒子阴影转换错误全部内容，希望文章能够帮你解决javascript – 真的很奇怪的盒子阴影转换错误所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1119370.html