缩放时backdrop filter模糊效果边缘闪烁问题求助

我制作了一个鼠标悬停（hover）时会缩放的简单卡片组件，卡片的文本容器应用了backdrop-filter模糊效果。悬停时缩放过渡动画流畅，但文本容器的底部边缘出现闪烁现象。

相关代码 #

CSS代码

.card{
    width: 200px;
    height: 250px;
    border-radius: 10px;
    transition: transform 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
    margin: 50px;
    will-change: transform;
}

.card:hover{
  transform: scale(1.05);
}

.card-details{
    background-color: rgb(255 255 255/60%);
    backdrop-filter: blur(5px);
    padding: 15px;
    font-size: 30px;
}

HTML代码

<div class="card">
  <div class="card-details">
    Lorem Ipsum
  </div>
</div>

可行的解决建议 #

• 触发GPU加速优化渲染：给.card-details添加transform: translateZ(0)，强制浏览器使用GPU处理该元素的渲染，避免闪烁：

  .card-details{
      background-color: rgb(255 255 255/60%);
      backdrop-filter: blur(5px);
      padding: 15px;
      font-size: 30px;
      transform: translateZ(0);
  }
  

  也可以替换为will-change: backdrop-filter，告知浏览器该元素的模糊效果会变化，提前做好渲染准备。

• 优化3D渲染上下文：给父元素.card添加perspective和transform-style: preserve-3d，统一卡片内元素的渲染上下文，减少渲染冲突：

  .card{
      /* 原有样式 */
      perspective: 1000px;
      transform-style: preserve-3d;
  }
  

• 掩盖闪烁边缘：给.card-details添加透明底部边框，填补渲染时的边缘空隙：

  .card-details{
      /* 原有样式 */
      border-bottom: 1px solid transparent;
  }
  

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