@blecked88

Что делать если дрожит фоновое изображение при скроллинге страницы с телефона (тестил на chrome)?

body {
    font-size: 1.3vw;
    margin: 0;
    font-family: montserrat;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #C1BFBF;
    position: relative; /* Добавить относительное позиционирование */
    background-image: url("../images/background.jpg"); /* Замените на путь к вашей картинке */
    background-size: cover; /* Заполнить всю область */
    background-attachment: fixed; /*  Фиксировать фон относительно окна */
    overflow-y: auto; /*  Включить скроллинг контента */
    overflow-x: hidden; /* Запретить скроллинг вправо-влево */
}


Собственно при прокрутке страницы изображение дрожит + появляется какой то белый прямоугольник снизу. (как я понимаю из за него и дрожит). И именно на телефоне. На компьютере всё ок. Проблема возникает на моем сайте-блоге https://sseerr.space/ (тут можете наглядно увидеть ее). Буду благодарен за любую помощь.
  • Вопрос задан
  • 188 просмотров
Решения вопроса 1
@blecked88 Автор вопроса
Пофиксил! Проблема была действительно из-за телефонной адресной строки браузера. Непосредственно фикс:
JS:
<script>
        function setFixedBackgroundHeight() {
            const vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', `${vh}px`);
        }

        window.addEventListener('resize', setFixedBackgroundHeight);
        setFixedBackgroundHeight();
    </script>


CSS:
body {
    font-size: 1.3vw;
    margin: 0;
    font-family: montserrat;
    display: flex;
    flex-direction: column;
    color: #C1BFBF;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    background-image: url("../images/background.jpg");
    background-size: cover;
}

/* Использование переменной --vh для расчета высоты */
body {
    --vh: 1vh;
    min-height: calc(100 * var(--vh));
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы