2

When I change blur filter, image trembles a little bit.

Here is demo at jsfiddle. Please click twice on button at 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);
}

I am using Chrome 63.0.3239.84 on Mac with non-Retina display.

I see many similar question, but no one answer helps me
image moves on hover - chrome opacity issue
CSS transition effect makes image blurry / moves image 1px, in Chrome?

Evgeny Gendel
  • 81
  • 1
  • 4
  • I played around with your fiddle. The only explanation I could think of is that perhaps your blurr function actually causes a border around your image. And when the blurr is removed the border is also removed. If that's what it is I'm not sure of the solution. – Michael d Jan 11 '18 at 22:46

1 Answers1

1

I cheated problem using transition by steps, not smoothly

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

It is not a solving, it is a cheating and can be applied not everywhere.
I can't explain it, but it works for me.

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

Evgeny Gendel
  • 81
  • 1
  • 4