4

I'm facing this popular issue with Chrome, where I apply a filter:blur(8px) to an image hover and it flickers when the hover effect is on/off, the image flickers.

Before posting I did search and try options like adding:

-webkit-backface-visibility: hidden;

or:

-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;

But none of those worked for me.

It's important to notice that it happens on first load, or when google chrome dev tool is open with the option "disable cache" under the network tab.

Screencast here

jsFiddle

Any help is appreciated!

ich_cb
  • 99
  • 8
  • 1
    possible duplicate of : https://stackoverflow.com/questions/50249520/how-to-prevent-image-flash-when-transitioning-with-blur/50249624#50249624 – Temani Afif May 10 '18 at 09:51
  • @VXp here is the same blur issue as the last time and we have a video here so you can see the flash ;) – Temani Afif May 10 '18 at 09:51
  • Another related one : https://stackoverflow.com/questions/47914821/image-moves-on-hover-when-changing-filter-in-chrome/47959946#47959946 – Temani Afif May 10 '18 at 09:57

0 Answers0