0

Есть такой код:

body {
    overflow: hidden;
}

.footer {
    position: fixed;
    display: block;
    width: 100%;
    left: 0;
    right: auto;
    top: auto;
    bottom: 0;
    background: black;
    height: 200px
}

В десктопе всё работает хорошо, но в мобильных браузерах при скролле вниз начинает пропадать хеадер самого Хрома, а мой футер начинает подниматься вместе с хеадером Хрома:

Проблемки

(фон - синий, футер - чёрный)

После полного исчезновения хеадера футер встаёт на место. Если убрать "overflow: hidden;" футер начинает вести себя как нужно, но скролл начинает работать с притормаживанием и футер всё равно вибрирует при скролле.

P.S. Почему я использую overflow и скролл вместе: при скролле срабатывает событие перетаскивания элемента сайта.

Как решить проблему?

2 ответа 2

0

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

    left: 0; 
    right: auto;
    top: auto;

По идее достаточно того, что:

  • он зафиксирован
  • его ширина 100%
  • он на расстоянии 0px от низа
1
  • Правила действительно лишние (кроме, возможно, left: 0;, так как margin body ненулувой), но удаление их проблему не решает. 18 фев 2020 в 14:38
0

Этот фикс решает проблему:

transform: translateZ(0);

Источник

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.