CODEWITHSUNDEEP
cssgoogle-chromeflicker
Piet Bez
Piet Bez

Reputation: 105

chrome flicker css transform

has anybody seen this before

http://www.duimpiesemaat.com/cherie/

the whole browser (only chrome) flickers to the point where i can actualy see my desktop behind it but only for a split second?

there are 4 smiley face buttons that trigger a css transform. it doesnt happen consistently every time so you have to hover over the buttons to trigger the animation a few times

i have read some other post on similar situations but none of them describe this situation.

im not posting the code as there is lots of it and i have no idea what part to post. was hoping that someone could recognize the issue straight away from having had similar issues

by the way, the site is still very experimental. i have a client who wants a flash site. i advised against it because of the apple/flash boycott. so now im playing around with flash like behaviour in css.

so if anyone has seen this before or know of a particular bit of css that could cause this, please let me know as i am baffled.

Upvotes: 1

Views: 2785

Answers (1)

SRV Media Support
SRV Media Support

Reputation: 71

Since you are using css, there are a couple of things that you can try:

  • Add -webkit-backface-visibility: hidden; to the element that is flickering
  • Add -webkit-transform-style: preserve-3d; to the element that is flickering
  • Add -webkit-transform: translate3d(0, 0, 0); to all it's clildren elements (if any)

For fonts, you might try:

html,body {
    -webkit-font-smoothing: antialiased;
}

Further, since your problem occurs during hover, suggest you to use the :hover selector

Upvotes: 7

Related Questions