[CSS]: Text Antialiasing Fix for Opacity or Animation
(backface-visibility)

backface-visibility Text Antialiasing rendering differences for Opacity or Animation in Safari
You must have noticed that while animated or semi-transparent, the text is rendered differently in the browser.
So in Safari when animation ends the font gets more bold antialising with a noticeable change.

A simple way to fix this with CSS3 is to add backface-visibility:hidden property to the container you animate:

backface-visibility:hidden;
-webkit-backface-visibility:hidden;

The property is currently supported only in Webkit browser but you may add other browsers modifiers in case they will add that.

[CSS]: Text Antialiasing Fix for Opacity or Animation
(backface-visibility)
was last modified: August 20th, 2012 by Антон Белоусов
Лучший способ поддержать этот блог — поделиться ссылкой:

Подпишитесь на рассылку новых постов по почте

Нашли ошибку?

Если несложно, выделите неправильно написанное слово или фразу и нажмите Shift + Enter на клавиатуре или кликните по ссылке «отправить уведомление об ошибке» — и я все исправлю.