Задать вопрос
@maxelende

Почему fixed div прыгает при скроллинге на мобильном?

При быстрой прокрутке страницы на мобильном телефоне (браузер chrome) подпрыгивает fixed блок.
Над ним появляется белая полоса около 1px высотой. Как убрать этот баг?

<!doctype html>
<html lang="ru">
<head>
<title>TEST</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
html, body, div {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
body {
    padding-top: 44px;    
}
.header {
    background-color: #004f74;
    position: fixed;
    height: 44px;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
}
.wrapper {
    height: 3000px;
}
</style>
</head>
<body>
    <div class="wrapper">
        <div class="header">
        </div>
    </div>
</body>
</html>


Update. Проверял в мобильных версиях life.ru и rbc.ru - там ничего не прыгает. Но фикс бага так и не понял на этих сайтах.
  • Вопрос задан
  • 1679 просмотров
Подписаться 3 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Пригласить эксперта
Ответы на вопрос 1
@Aidark
Вам нужно сделать следующее:
body {
    padding-top: 44px;    
    background: url('/blank.gif') fixed; / или в base64
}

Суть в том, что фон должен быть с fixed изображением.

Но еще лучше вместо применения свойства padding-top: 44px к body применить его к wrapper
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы