-webkit-backface-visibility Fixed Position Safari Bug

I often use -webkit-backface-visibility: hidden; to fix flickering issues with hovers and css transitions or animations on all browsers.

Well I was experiencing a very odd glitch in Safari that caused elements to get stuck in the wrong position, even though their hover/click/event handlers were still located in the proper positions.

For example, when switching from a css class with position: fixed, top: 0 to a class with position: absolute; top: 0; Safari would sometimes render the element in between the previous browser fixed position and its final destination.

After essentially giving up on the problem, I had a random thought about backface-visibility causing issues and I’m not even sure why. Sure enough, after removing it, I no longer have any issues with post-animation glitches or the fixed position to absolute position bug.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s