Chrome + Safari opacity transition bug creates st

Question

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).

Answer 1

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