CSS: Как фиксированный элемент может скроллиться?

Question

[ChemAli]

Столкнулся с необъяснимым и даже мистическим поведением элемента. Есть меню, ему задано свойство position:fixed, однако оно всё равно прокручивается при скроллинге страницы. Чем объяснить такое я не знаю.

Для конкретики, проблемный сайт: giskart.com, проблемный элемент: nav.navbar (верхнее меню).

Как такое возможно?

Answer 1

[Valery]

Поведение и правда интересное. Интересно и то, что при сохранении странички на компьютер проблема пропадает. Так же, как пропадает обертка

< div class="designmodo-wrapper home page page-id-1483 page-parent page-template-default" />

У которой прописано transform: translate3d(0, 0, 0). Что и заставляет фиксированное меню вести себя так, словно оно спозиционированно относительно этого родителя, а не вьюпорта. Вот пример на codepen для наглядности: codepen.io/markdebeer/pen/qrBDm
Но если убрать transform: translate3d на сайте через инспектор, проблема остается (в отличие от примера на codepen). Не знаю, куда копать дальше

Comments

[ChemAli]

Спасибо за погружение! Проблема, как оказалось, известна, описана здесь: meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fi...
И здесь: stackoverflow.com/questions/15194313/webkit-css-tr...

Answer 2

[Therapyx]

Есть меню, ему задано свойство position:fixed, однако оно всё равно прокручивается при скроллинге страницы.

Это шутка такая? :) Именно из за position:fixed оно и прокручиватся, ради интереса нажми на Ф12, нажми лупу и на этот нав-бар, и в цсс свойствах убери position:fixed - и проблема будет решена )

Comments

[ChemAli]

Пробовал, нет эффекта. У вас получилось?

[Therapyx]

ChemAli: ну как-то странно, потому-что в браузере я убрал галочку на фикседе и все пропало )