В процессе верстки очередного проекта наткнулся на странный баг в Firefox свежих версий, которые поддерживают свойство backface-visibility. Ранее описание этой проблемы не встречал, поэтому решил поделиться. Полезно будет всем, кто прочел этот пост об антиалиасинге под Windows и начал использовать эти советы.
Суть проблемы
Итак, если для улучшения сглаживания веб-шрифтов вы используете рекомендации из вышеупомянутого поста, тогда ваш CSS имеет следующие строки:
body {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
Теперь представьте, что вам (или вашему дизайнеру) помимо хорошего рендеринга шрифтов вдруг захотелось добавить в проект какую-нибудь плавающую панель (в нашем примере — иконки соц.сетей), вполне логично использующую position: fixed;. (http://jsfiddle.net/RYCnH/184/)
По каким-то причинам эта самая панель отказывается плавать после добавления свойств сглаживания шрифтов и фиксируется так, будто position у неё не fixed, а absolute: http://jsfiddle.net/RYCnH/185/.
Решение
Всё дело в свойстве -moz-backface-visibility: hidden;. Изменив его на visible у контейнера нашей плавающей панели, получим желаемый эффект: http://jsfiddle.net/RYCnH/186/.
Автор: lancedikson
Очень помогло!
Спасибо!
-webkit-text-stroke: 0.20px
Делает нормальную ширину шрифта в Chrome (как в FireFox)