我在 Chrome 上遇到了 filter: blur() 的问题。我已经使用 transform: translate3d(0, 0, 0) 来鼓励硬件加速并且它大大提高了性能(我很少使用它)。我有一个元素，我已将其 before 设置为具有背景图像和模糊效果。我已将其范围设置为超出其包含元素的范围。
上面是 Chrome 中发生的情况的屏幕截图。左边是硬件加速版，右边是非硬件加速版。请注意，在左侧，模糊看起来嵌入了柔和的边缘。
看起来在 Chrome 中，当硬件加速时，元素在模糊之前被溢出剪裁，导致羽化边缘。
除了禁用硬件加速(这会降低这种大半径模糊的性能)之外，还有没有办法鼓励 Chrome 在裁剪之前执行模糊？
我在下面附上了一个示例测试用例。
谢谢!
div {
width: 200px;
height: 200px;
position: absolute;
box-sizing: border-box;
overflow: hidden;
border: 2px solid red;
}
div::before {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg);
content: "";
display: block;
position: absolute;
left: -200px;
top: -200px;
width: calc(100% + 400px);
height: calc(100% + 400px);
background-size: calc(100% + 400px) calc(100% + 400px);
filter: blur(60px);
-webkit-filter: blur(60px);
z-index: 1;
}
#incorrect::before {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#incorrect {
left: 100px;
top: 100px;
}
#correct {
right: 100px;
top: 100px;
}<html>
<body>
<div id="incorrect"></div>
<div id="correct"></div>
</body>
</html>最佳答案
您可以尝试将 #incorrect::before 上的最后一个属性“translation-value-z”设置为 1。我不知道为什么，但它似乎有效。
Translation-value-z is the third vector value and defines the translation in the direction of the z-axis (3rd dimension). Attention: It can only be a length value, percentage is not supported.
更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d
div {
width: 200px;
height: 200px;
position: absolute;
box-sizing: border-box;
overflow: hidden;
border: 2px solid red;
}
div::before {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg);
content: "";
display: block;
position: absolute;
left: -200px;
top: -200px;
width: calc(100% + 400px);
height: calc(100% + 400px);
background-size: calc(100% + 400px) calc(100% + 400px);
filter: blur(60px);
-webkit-filter: blur(60px);
z-index: 1;
}
#incorrect::before {
-webkit-transform: translate3d(0, 0, 1);
-ms-transform: translate3d(0, 0, 1);
transform: translate3d(0, 0, 1);
}
#incorrect {
left: 100px;
top: 100px;
}
#correct {
right: 100px;
top: 100px;
}<html>
<body>
<div id="incorrect"></div>
<div id="correct"></div>
</body>
</html>关于css - 硬件加速时在 Chrome 中剪辑时不正确的 CSS 模糊渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34601457/