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

    Решение


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

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 1

      0
      Спасибо, нашел баг сам, просто отключив свойство backface-visibility, потом начал искать в инете наткнулся на вашу статью. Ситуация у меня похожая, но немного отличается. Из за этого свойства в Firefoxe неправильно отображались popover окна. Точнее затемнение фона не растягивалось на всю ширину и высоту. Я уже отдельный файл стилей для фаерфокса прописал, в нем вручную растягивал фон и т.д. А решение оказалось таким простым =)

      Версия: Firefox 23.0.1

      Only users with full accounts can post comments. Log in, please.