Как сделать чтобы position:fixed работал во всех браузерах?

Question

[Konstantin]

Всем привет. Помогите закрепить элемент на странице. Есть div

<div style="position: fixed; top: 30px; right: 30px; z-index: 9999; height: 100px;
 width: 100px; background: red;"></div>

В FF прикрепляется и висит в одном месте, как и задумано. А в chrome не прикрепляется, ведет себя как absolute. Пробовал добавлять

-webkit-backface-visibility: hidden;    -webkit-transform: translateZ(0);

Пробовал этот div помещать в div с position absolute, ничего не помогает. Подскажите уже как-нибудь его прибить там, хоть css хоть js любой вариант, лишь бы работал

Еще такой момент обнаружил. Этот div помещен в html перед закрывающим тегом body. Когда задаю стили bottom:0 и right:0 то в FF этот div располагается внизу экрана и там фиксируется, а в chrome он располагается внизу страницы а не экрана.

Comments

[Lynn «Кофеман»]

Не верю. Живой пример в студию

[Konstantin]

Алексей Тен: https://uventa.net/

Answer 1

[littleguga]

Всё работает во всех браузерах. Почистите кэш.

>Пробовал этот div помещать в div с position absolute, ничего не помогает.
Очень странное и абсолютно ненужное действие в данном случае. Внимательно разберитесь для чего нужна position: absolute;

Comments

[Konstantin]

Вот сайт https://uventa.net/ Справа вверху желтый кубик с fixed position В хроме он не фиксируется на одном месте, в FF фиксируется. Уже вычистил и кэш и пол помыл и 8 бубнов сломал и делал действия еще страннее, цепляясь за каждую версию в небъятных просторах интернета. Ничего не помогает.

[Zhainar]

Konstantin: попробовал переместить его над закрывающим тегом body, все работает.

[Zhainar]

Konstantin: не знаю почему но в див fsm-container fsm-left он не работает.

Answer 2

[Lynn «Кофеман»]

Вот буквально на прошлой неделе статья всплыла meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fi...

Коротко, CSS transform задают новый стек для position:fixed элементов. У вас зачем-то задан transform: perpspective(1000) который не работает в FF (потому что вы забыли добавить единицы изменения), но работает в Chrome. Зачем вам там вообще нужно это правило я так и не понял.