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

Question

[blecked88]

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/ (тут можете наглядно увидеть ее). Буду благодарен за любую помощь.

Comments

[Wispik]

попробуй для body установить min-height: 100lvh;

[blecked88]

Wispik, не помогло

[Александр Васильев]

Ничего не дрожит

[blecked88]

Александр Васильев, дрожит, дело как я понимаю в адресной строке браузера на телефонах. Область просмотра изменяется при начале скроллинга. Пытаюсь вот найти решение

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