backdrop-filter模糊过渡时div边缘异常的跨浏览器修复方案咨询

问题描述 #

点击按钮后，通过backdrop-filter实现背景模糊效果，但过渡动画过程中div元素的边缘过渡表现不佳，该问题在除Firefox外的所有浏览器中存在，寻求修复方案。

代码示例 #

HTML #

<body>
<div class="cube"></div>    
<button>BLUR BUTTON</button>
</body>

CSS #

body {
    margin: 0;
    background: url('https://images.pexels.com/photos/2763927/pexels-photo-2763927.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')no-repeat;
    background-size: cover;
}

div {
    width: 900px;
    height: 900px;
    transition: 1s ease;    
}

.blur {
    backdrop-filter: blur(20px);
    transition: 1s ease;        
}

JavaScript #

var btn = document.querySelector('button');
var div = document.querySelector('div');
            
btn.addEventListener('click', function() {              
    div.classList.toggle('blur');           
}); 

修复方案 #

方法1：添加透明边框/内边距 #

给div添加透明边框或微小内边距，让模糊效果有足够的渲染空间，避免边缘裁切问题：

div {
    width: 900px;
    height: 900px;
    transition: 1s ease;
    /* 添加1px透明边框 */
    border: 1px solid transparent;
    /* 或者用内边距替代 */
    /* padding: 1px; */
}

方法2：用伪元素承载模糊效果 #

将模糊效果转移到伪元素上，通过伪元素的透明度过渡实现平滑动画，分离元素边缘与模糊渲染：

div {
    width: 900px;
    height: 900px;
    position: relative;
    transition: 1s ease;
}
div::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(20px);
    opacity: 0;
    transition: opacity 1s ease;
}
div.blur::before {
    opacity: 1;
}

方法3：触发硬件加速 #

给div添加轻微的transform属性，触发浏览器硬件加速，优化边缘过渡的渲染表现：

div {
    width: 900px;
    height: 900px;
    transition: 1s ease;
    transform: translateZ(0);
}

内容的提问来源于stack exchange，提问作者manekko