В процессе верстки очередного проекта наткнулся на странный баг в Firefox свежих версий, которые поддерживают свойство backface-visibility. Ранее описание этой проблемы не встречал, поэтому решил поделиться. Полезно будет всем, кто прочел этот пост об антиалиасинге под Windows и начал использовать эти советы.
Итак, если для улучшения сглаживания веб-шрифтов вы используете рекомендации из вышеупомянутого поста, тогда ваш CSS имеет следующие строки:
Теперь представьте, что вам (или вашему дизайнеру) помимо хорошего рендеринга шрифтов вдруг захотелось добавить в проект какую-нибудь плавающую панель (в нашем примере — иконки соц.сетей), вполне логично использующую
По каким-то причинам эта самая панель в Firefox «отказывается плавать» после добавления свойств сглаживания шрифтов и позиционируется так, будто position у неё не fixed, а absolute: http://jsfiddle.net/RYCnH/185/.
Всё дело в свойстве
Суть проблемы
Итак, если для улучшения сглаживания веб-шрифтов вы используете рекомендации из вышеупомянутого поста, тогда ваш 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/)По каким-то причинам эта самая панель в Firefox «отказывается плавать» после добавления свойств сглаживания шрифтов и позиционируется так, будто position у неё не fixed, а absolute: http://jsfiddle.net/RYCnH/185/.
Решение
Всё дело в свойстве
-moz-backface-visibility: hidden
. Изменив его на visible
у контейнера нашей плавающей панели, получим желаемый эффект: http://jsfiddle.net/RYCnH/186/.