硬件加速时在Chrome中剪切时,CSS模糊渲染不正确
Mat*_*ain 8 css google-chrome css-transforms css-filters
我filter: blur()在Chrome上遇到了问题.我曾经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>Coe*_*uze -1
您可以尝试将最后一个属性“translation-value-z”设置为#incorrect::before1。我不知道到底为什么，但它似乎有效。
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>| 归档时间： |
|
| 查看次数： |
413 次 |
| 最近记录： |