CODEWITHSUNDEEP
cssgoogle-chromegradientopera
isadora
isadora

Reputation: 57

Stop gradient flickering in chrome and opera?

I'm using a gradient for the background of my site. It looks fine in safari and firefox, but in chrome and opera there is serious flickering. I've read on other sites/posts about banding and dither issues with chrome. I have tried using CSS to render the gradient and also just an svg. Both of those have the same flickering result.

Is there a code I can write to force chrome and opera to render the gradient like safari or firefox?

I've tried -webkit-transform: translateZ(0); with and without the webkit prefix. It doesn't resolve the issue. Any other suggestions?

P.S. My gradient is 90 degrees (left to right) #66cccc to #349A9A. I don't know if the color makes any difference, but I'd be willing to adjust it slightly if that would resolve the issue.

Upvotes: 3

Views: 3550

Answers (2)

BonsaiOak
BonsaiOak

Reputation: 28941

This is a known problem on with chrome on certain mac laptops. It seems to be related to how their screens are built. More information about how an LCD's construction can cause it to flicker under certain conditions is found in this article.

My experience with the issue seems to indicate that it seems to crop up with shades of gray. Other colors don't seem to have issues.

Upvotes: 5

gGrga
gGrga

Reputation: 19

i have the same problem. i've google it because it shows only in google chrome and found out that the problem is related with my macbook pro mid 2012 13" screen or intel hd4000 internal graphic card is causing damage (no one is sure who to blame)

Upvotes: -4

Related Questions