0

So I have a few images with a blur filter and when ever I hover over them it flickers it flashes out when I put my mouse over and again when I take it off. I have had this problem appear seemingly randomly as it happens on computers I am on but than other times it is randomly fine.

I have already tried backface-visibility: visible|hidden|initial|inherit; I have already tried -webkit-transform: translateZ(0) scale(1.0, 1.0); I have already tried -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

none of which have had any effect. here is my code https://jsfiddle.net/leothetinyninja/wjnzof9x/ Please tell me if you know what the problem is.

LeotheTinyNinja
  • 1
  • 1
  • on Chrome, right ? – Temani Afif May 12 '18 at 19:26
  • Here it does not flicker. `figure:hover > #tes { /*filter: blur(6px);*/ }` adds a blur though. I am using Chrome. It is very smooth. – Attersson May 12 '18 at 19:27
  • `backface-visibility: visible|hidden|initial|inherit;` isn't valid. You can only use one of those - not all four at once. As for flicker, I couldn't get that to occur but if it is a bit random, then fair enough - browsers can be a bit strange sometimes. – spacer GIF May 12 '18 at 19:28
  • 1
    possible duplicate of : https://stackoverflow.com/questions/50249520/how-to-prevent-image-flash-when-transitioning-with-blur/50249624#50249624 – Temani Afif May 12 '18 at 19:29
  • 1
    another one : https://stackoverflow.com/questions/50269779/chrome-still-does-flicker-on-transition?noredirect=1&lq=1 – Temani Afif May 12 '18 at 19:29
  • I decided to make my own question as others asking about the same problem got different answers that worked for them but not me as for using backface-visibility: (to many things) I misunderstood a different solution and put that in. its nothing though. – LeotheTinyNinja May 12 '18 at 20:50
  • I have just got onto a different computer and no flicker. I have used many different computers now and it has happened on a few of them I think there is still a problem but I dont see how to fix it if it is only happening occasionnally – LeotheTinyNinja May 12 '18 at 20:53

2 Answers2

0

Fix: I added a filter: blur(0.5px); to the default so it's always at least that way and it seems to have fixed it. Thank you everyone for answering though

LeotheTinyNinja
  • 1
  • 1
-3

Try adding a 1 second transition for your hover. This will either fix it, or give you a better idea of what is going on.

user6124043
  • 61
  • 1
  • 6
  • This is probably more suitable as a comment than an answer. Edit: But I've just noticed you probably don't have enough reputation to leave one. This is something I dislike about StackOverflow but with a few high-quality answers you'll probably get enough reputation soon. – spacer GIF May 12 '18 at 19:29