Chrome浏览器图片hover blur滤镜切换时闪烁问题求助

最近在Chrome浏览器开发时遇到一个棘手的问题：我给图片添加hover效果，用filter:blur(8px)实现模糊，但每次hover触发或取消的时候，图片都会出现明显的闪烁现象。

我已经尝试过的解决方案 #

在发帖前我搜索了相关问题，试了几种常见的GPU加速方案，但都没有效果：

• 方案1：添加backface-visibility属性

-webkit-backface-visibility: hidden;

• 方案2：启用3D变换触发GPU加速

-webkit-transform: translate3d(0, 0, 0); 
-webkit-transform-style: preserve-3d; 
-webkit-transform: translateZ(0); 
-webkit-perspective: 1000;

问题复现条件 #

这个闪烁问题会在两种场景下出现：

• 页面首次加载时
• Chrome开发者工具「Network」标签下勾选「disable cache」选项时

示例代码 #

以下是能复现问题的简化代码：

HTML

<div class="image-wrapper">
  <img src="https://picsum.photos/600/400" alt="Demo Image">
</div>

CSS

.image-wrapper {
  width: 600px;
  height: 400px;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  transition: filter 0.3s ease-in-out;
}

.image-wrapper:hover img {
  filter: blur(8px);
}

恳请各位大佬帮忙看看这个问题怎么解决，万分感谢！

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