3 способа решения проблемы скроллинга дива с position:fixed в Chrome и Safari

Привет! Да, не писал долго очень, было много дел, но заметки по ходу делал, буду потихоньку теперь опубликовывать. Начну с проблемы, которую решал, кроме шуток, целый день. Когда в Google Chrome неправильно работает обработка position:fixed при скролле.

Выглядит это так: (слева, как должно быть и как обрабатывается в мозилле при сколлинге, справа как в chrome):

fix-chrome-safari-position-fixed-niceseo-ru

Для начала, что нарыл в интернете. Есть такой мануал, разбить такой div:

На два таких:

Но у меня это мало того, что не сработало, так еще и не могло заработать в принципе по той причине, что top был указан не в пикселях (200px в примере выше) а в относительной величине 50%, которая у position:absolute не обрабатывается.

Ну, попробуйте, мб поможет.

Затем есть решение убрать z-index:10 (к примеру) и заменить его на -webkit-transform: translateZ(10);

У меня не заработало, и вообще весь дизайн пошёл ходуном.

И наконец, решение, до которого допёр сам и случайно. У меня div с position:fixed (#s в примере) был внутри дива #r, который нужен был только для того, чтобы в нём прописать бэкграунд на всю страницу:

Вылечилось перестановкой слагаемых:

Можно вообще не менять их а убрать параметр z-index у #r, тоже вылечит, но не всем подойдёт, у кого-то может что-то перестать быть видимым.

Надеюсь не зря так долго мучился и делился этими хаками с вами, сделаем кроссбраузерные сайты вместе, чтобы и Chrome, и Safari, и даже юзеры Opera (которая с недавних пор на движке Chromium) видели наш сайт таким, каким мы его видим в Mozilla :D

С вами был linur, до скорых встреч! Сегодня еще одну статейку черкану, скорее всего)

Какой способ больше подошёл?
Способ №1Способ №2Способ №3

Оцените статью!

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Для отправки сообщения выберите лишнее изображение