backdrop-blur 导致圆角锯齿

昨天在 follow 中看到了这样一个效果， 仔细看发现下侧浮层两个圆角透出了底图的部分内容

思考

第一反应是圆角的渲染导致的像素不匹配的问题
我尝试写一个例子重现这个问题

但是我尝试了不同大小的圆角和图片，并不能复现出这个问题
我尝试查看可能出现问题的样式

在尝试切换 backdrop-blur 的时候我发现这个问题消失了，所以问题是 backdrop-blur 这个属性的计算引起的

解决

我尝试将这个属性拆分到元素内部

Copy



text



可以看到，如果过渡动画应用在整个元素上，那么 backdrop-blur 的效果会在整体渲染完成后才进行

所以我们换个方法，将过度动画应用于内层的背景元素和模糊元素

Copy




text



我们看一下效果

非常完美，收工！