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

В процессе верстки очередного проекта наткнулся на странный баг в 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

Источник