使用jQuery移除CSS模糊类时Chrome浏览器中图片出现闪烁问题求助

这个问题我之前在Chrome里也碰到过，确实是个挺闹心的渲染小bug！你试过的translate3D和backface-visibility是常见的硬件加速优化手段，但对于filter属性移除时的闪烁，可能还需要针对性的调整。

给你几个亲测有效的方案：

1. 给模糊效果添加平滑过渡动画 #

直接移除模糊类会让浏览器突然切换渲染状态，很容易触发闪烁。给filter属性加上过渡动画，让模糊效果平滑消失，就能避免这个问题：

.blur {
  filter: blur(5px);
  /* 过渡时长可以根据需求调整，0.2s是比较自然的速度 */
  transition: filter 0.2s ease-out;
}

这样移除.blur类的时候，图片会从模糊慢慢过渡到清晰，渲染变化更平缓，Chrome就不会出现突兀的闪烁了。

2. 使用will-change提前告知浏览器渲染变化 #

Chrome的渲染引擎有时候会对突然的属性变化准备不足，用will-change提前告诉浏览器这个元素的filter属性会发生变化，让它提前分配资源优化渲染：

img {
  will-change: filter;
  /* 保留你之前的硬件加速属性 */
  -webkit-transform: translate3D(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

这个属性能让浏览器提前为filter的变化做好渲染准备，减少卡顿和闪烁的概率。

3. 确保在图片完全加载后再移除类 #

有时候闪烁是因为图片还没加载完成就移除了模糊类，浏览器在加载图片和处理样式时产生冲突导致的。可以把移除类的操作放在window.load事件里，而不是document.ready：

$(window).on('load', function() {
  $('img').removeClass('blur');
});

这样能保证图片已经完全加载完毕，再进行样式修改，避免渲染层面的冲突。

你可以先试试前两个方案，一般就能解决问题了。如果还是不行，还可以尝试临时切换图片的visibility或者opacity来做过渡，但前两个方法应该足够覆盖大部分场景了。

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