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!
