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

Question

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

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

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。

我看到很多类似的问题，但没有一个答案可以帮助我
在悬停时移动图像 - 铬不透明度问题
CSS 过渡效果使图像模糊/在 Chrome 中移动图像 1px？

Answer 1

我使用逐步过渡欺骗了问题，不顺利

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

这不是一个解决方案，它是一种作弊方法，不能在任何地方应用。
我无法解释它，但它对我有用。

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