Chrome 中的过渡滤镜时背景图像颤抖

Posted 2023-03-06

【中文标题】Chrome 中的过渡滤镜时背景图像颤抖

【英文标题】：Background image trembling while transition filter at Chrome

【发布时间】：2018-06-21 05:46:50

【问题描述】：

当我更改模糊滤镜时，图像会有点颤抖。

这里是 jsfiddle 的 demo。请在演示中单击两次按钮

body 
    background-color: #000;


body::before 
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    z-index: -1;
    background: url(https://static01.nyt.com/newsgraphics/2017/12/26/2018-1-olympics-climate/assets/images/469466931-1254.jpg) center no-repeat;
    background-size: cover;
    transition: filter 2s;

body.blurred::before 
    filter: blur(30px);

我在非 Retina 显示屏的 Mac 上使用 Chrome 63.0.3239.84。

我看到很多类似的问题，但没有一个答案可以帮助我image moves on hover - chrome opacity issueCSS transition effect makes image blurry / moves image 1px, in Chrome?

【问题讨论】：

我玩过你的小提琴。我能想到的唯一解释是，也许您的模糊功能实际上会导致图像周围出现边框。并且当模糊被移除时，边界也被移除。如果是这样，我不确定解决方案。

【参考方案1】：

我用分步过渡作弊的问题，不顺利

transition-timing-function: steps(10, end);

这不是解决问题，而是作弊，并非无处不在。 我无法解释它，但它对我有用。

https://jsfiddle.net/tuzae6a9/6/