最近,我在 WebKit 浏览器中发现了一个有趣且烦人的错误。
以拥有一个父 DIV(在本例中,我们将使用 .wrapper
)和一个子 DIV(.main
)为例。在 .main
DIV 上应用 box-shadow,在 .wrapper
DIV 上应用模糊滤镜。像这样:
.wrapper {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
filter: blur(3px);
}
.main {
width: 100px;
height: 100px;
box-shadow: 0 0 15px rgba(0,0,0,1);
}
运行它,您会注意到 .main
DIV 中有一个网格图案。奇怪的是,只有当 .main
DIV 上没有背景并且 .main
DIV 应用了 box-shadow 时,才会发生这种情况。 Here's a live demo of what I'm referring to .
现在我的问题是,如果不向 .main
DIV 添加背景,我能做些什么来防止这种情况发生吗?我试过使用投影滤镜,但它没有像 box-shadow 那样提供我需要的功能。还是我必须等待 WebKit 对此进行修补?
提前致谢!
最佳答案
将以下规则添加到 .main
seems to解决 Webkit transform: translateZ(0);
除了解决该错误外,它实际上不应该做任何事情。
关于javascript - 使用模糊滤镜模糊框阴影会导致 Webkit 浏览器出现奇怪的线条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30722572/