Pull to refresh

Баг с position:fixed и backface-visibility в Firefox

Reading time 1 min
Views 13K
В процессе верстки очередного проекта наткнулся на странный баг в 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/)
По каким-то причинам эта самая панель в Firefox «отказывается плавать» после добавления свойств сглаживания шрифтов и позиционируется так, будто position у неё не fixed, а absolute: http://jsfiddle.net/RYCnH/185/.

Решение


Всё дело в свойстве -moz-backface-visibility: hidden. Изменив его на visible у контейнера нашей плавающей панели, получим желаемый эффект: http://jsfiddle.net/RYCnH/186/.
Tags:
Hubs:
+4
Comments 1
Comments Comments 1

Articles