Позиция: исправлено не работает в Google Chrome

У меня возникли проблемы с "фиксированным" элементом в Google Chrome. Элемент ведет себя так же, как и в других основных браузерах.

Вот CSS:

#element { 
    position: fixed; 
    bottom: 0px; 
    width: 100%; 
    height: 50px; 
    z-index: 10;
}

Проблема заключается в том, что при загрузке страницы элемент фиксируется в нижней части области просмотра, как и должно быть. При прокрутке он остается на том же месте, где он был при загрузке страницы, - он не остается зафиксированным в нижней части экрана.

Ответы

Ответ 1

попробуйте добавить следующий код в свой элемент:

-webkit-transform: translateZ(0);

Ответ 2

У меня было свойство: -webkit-perspective:800; на теле тега. Я удалил это, и фиксированное позиционирование снова начало работать... неясно, но стоит посмотреть.

Ответ 3

В качестве дополнения к выигранному ответу: это не работает, если у вас есть "- webkit-transform-style: preserve-3d" в одном из родительских элементов, Я не знаю, почему, у меня просто было такое и удалено.

Ответ 4

Мне пришлось отключить:

-webkit-transform: none !important;
transform: none !important;

чтобы сделать это для меня.

Ответ 5

Я должен был поставить левую позицию, чтобы это появилось... не просто верх:

{
    left: 0px;
}

Ответ 6

Ни один из этих ответов не работал для меня. То, что сработало для меня установив содержит свойство родительского элемента никто

{
  contain:none !important;
}

Ответ 7

Я использовал position: sticky; bottom: 0; position: sticky; bottom: 0; теперь.

#element { 
   position: sticky; <--- 
   bottom: 0px; 
   width: 100%; 
   height: 50px; 
   z-index: 10;
}

Ответ 8

Чтобы завершить то, что говорят другие ответы, также помните, что установка свойства will-change для любого родительского элемента нарушит фиксированное позиционирование.

Ответ 9

Сначала проверьте, есть ли у родителей

-webkit-transform: translateZ(...);

или же

transform: translateZ(...);

или же

-webkit-transform: translate3d(...)

или же

transform: translate3d(...)

и попробуйте удалить их.

Если все еще не работает, попробуйте добавить

-webkit-transform: translateZ(0);

или же

transform: translateZ(0);

к вашей стихии.

Если все еще не работает, проверьте другие стили -webkit-transform/transform/спектива для родителей и удалите их.

Ответ 10

Я исправил это, удалив

filter: blur(0);

в родительском элементе. У меня была только эта проблема с Chrome, она хорошо работала с Safari.

Ответ 11

Свойство will-change:transform; был причиной проблемы для меня. Просто нужно добавить will-change:auto; переопределить это.

Ответ 12

Попробуйте использовать

contain: none;

в родительском элементе.