关于filter属性的踩坑记录

blur实现毛玻璃特效

blur() CSS 方法将高斯模糊应用于输出图片，结合opacity() 实现毛玻璃特效。

加与不加对比如下：

此处demo的参数是filter: blur(8px) opacity(50%);

从上图可以发现，虽然实现了毛玻璃效果，但是四周存在白边，当作为背景图时，有白边显然不是最佳，如何解决白边问题。

transform: scale();解决白边问题

根据具体情况，对图片部分进行放大，这样可以解决白边问题。不过存在一种情况，本项目在最外层父元素的伪元素进行毛玻璃背景设置，父元素的高度是100%，因为进行了scale() Safari浏览器上出现了兼容问题，会导致子元素跟着放大的背景图移动，呈现出布局错乱。这是就引出另一个问题，如何解决因为transform: scale();引起的布局问题。

解决transform: scale()引起的布局问题

height 设置 -webkit-fill-available，