我在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>
答案 0 :(得分:0)
您可以尝试将#incorrect::before
上的最后一个属性“translation-value-z”设置为1.我完全不知道为什么,但它似乎有效。
Translation-value-z是第三个向量值并定义了 沿z轴方向的平移(第三维)。注意: 它只能是长度值,不支持百分比。
有关详细信息: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>