如何解决Chrome中filter: blur过渡结束时的图像闪烁问题？

这个问题我之前做视觉交互效果时也碰到过，本质是Chrome浏览器处理filter: blur从高值过渡到0的过程中，渲染引擎的一个小bug——过渡结束瞬间，浏览器会重新绘制原始图像，导致短暂的闪烁。下面给你几个实用的解决方案：

方案1：触发GPU加速，优化渲染流程 #

给目标元素添加GPU加速相关的CSS属性，让浏览器用GPU来处理滤镜过渡，避免重新绘制时的闪烁。修改你的CSS：

.sec {
  margin: 0 auto;
  width: 700px;
  height: 500px;
  background-image: url(http://placekitten.com/700/500);
  background-size: cover;
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
  /* 添加以下属性触发GPU加速 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.sec.active {
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  transition: filter 3s ease, transform 1s ease-out; /* 不要用all，明确指定过渡属性 */
}

方案2：避免完全清除blur值 #

如果方案1还不能解决，可以尝试把过渡后的blur值设为0.1px而不是0px——视觉上和无模糊几乎一致，但能避开Chrome的这个渲染bug：

.sec.active {
  -webkit-filter: blur(0.1px);
  filter: blur(0.1px);
  /* 其他属性保持不变 */
}

方案3：确保图像完全加载后再触发过渡 #

你当前的代码是在window.load后延迟1秒添加类，其实可以进一步确保背景图完全加载完成后再触发过渡，作为辅助优化：

$(function() {
  // 提取背景图地址并确认加载完成
  const bgUrl = $('.sec').css('background-image').replace(/url\(['"]?(.*?)['"]?\)/, '$1');
  const img = new Image();
  img.src = bgUrl;
  img.onload = function() {
    setTimeout(() => {
      $('.sec').addClass('active');
    }, 1000);
  };
});

建议先试试方案1，大部分情况下这个就能解决闪烁问题；如果不行，再叠加方案2即可。

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