javascript - 使用模糊滤镜模糊框阴影会导致 Webkit 浏览器出现奇怪的线条

标签 javascript jquery html css

最近,我在 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/

相关文章:

php - AJAX JQUERY 相关 :- How to call ajax on a ajax loaded page

javascript - JQuery 选项卡 : How to display a 'Loading...' message' on waiting an AJAX HTTP request response?

javascript - 在 jQuery 粘性菜单中显示/隐藏(位于中间)

javascript - 如何在页面底部添加页脚

html - 这个 body div 中同一行有两个链接?

javascript - 在 ios 上的 m.youtube.com 上导航的 uiwebview 上获得点击链接

javascript - 涉及对象和原型(prototype)的属性继承

javascript - 如何在 jQuery 中调试预期的 DOM 行为?

java - 即 11 : Error while sending Multipart Form Data request: Stream ended unexpectedly

c# - 在 C# 中捕获 javascript 事件