6

I have a bug on a opacity transition in both Chrome and Safari. When I hover over a parent div that triggers a opacity transition from 0 to 1 on a child div, content beneath the child div jitters for a split moment.

I've tried using -webkit-font-smoothing: antialiased; on the body, but the effect still occurs. Any ideas why? You can see the issue here (using either Chrome or Safari, hover over the 'Account' link in the top menu and you'll see the flicker).

eclipsis
  • 1,541
  • 3
  • 20
  • 56

1 Answers1

13

Add -webkit-backface-visibility: hidden; to the element, or to all elements with * if you feel like setting a blanket statement.

A few links describing the issue in greater detail:

Prevent flicker on webkit-transition of webkit-transform

How to fix flicker when using Webkit transforms & transitions

Community
  • 1
  • 1
John
  • 3,357
  • 1
  • 17
  • 15
  • Thank you for the answer John. Would it be fine to apply `-webkit-backface-visibility: hidden;` to the body selector? – eclipsis Mar 26 '14 at 02:02
  • As long as it fixes the flicker and doesn't cause any other issues, then it should be ok. As with anything, it has the potential to create problems of its own, so it might be best to only target the specific elements that are causing problems. – John Mar 26 '14 at 12:28