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);

Источник

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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