Как исправить дрожание фонового изображения при прокрутке страницы на телефоне с использованием браузера Chrome?

Для исправления дрожания фонового изображения при прокрутке страницы на телефоне с использованием браузера Chrome, можно попробовать использовать следующие методы:

1. Использовать CSS свойство `background-attachment: fixed;` для фонового изображения. Это зафиксирует изображение на месте и предотвратит его дрожание при прокрутке.

2. Оптимизировать размер и вес фонового изображения. Используйте форматы изображений с сжатием (например, JPEG или WebP) и убедитесь, что размер изображения соответствует размеру его отображения на экране.

Чтобы исправить дрожание изображения и появление белого прямоугольника при прокрутке страницы на мобильных устройствах на вашем сайте-блоге, можно использовать следующие рекомендации:

1. Оптимизировать изображения на странице. Используйте сжатие изображений, чтобы их размер был минимальным, не ухудшая качество.

2. Избегать использование сложных эффектов и анимаций на мобильных устройствах, так как это может вызывать дополнительную нагрузку и дрожание при прокрутке.

3. Проверить наличие ошибок в CSS коде, которые могут приводить к дрожанию изображений или появлению белых прямоугольников. Проверьте правильность использования позиционирования и прозрачности элементов на странице.

4. Попробовать использовать CSS свойство `backface-visibility: hidden;` для элементов, у которых наблюдается дрожание при прокрутке. Это свойство может помочь предотвратить неправильное отображение элементов при прокрутке.

Применение этих рекомендаций поможет устранить проблемы с дрожанием и появлением белых прямоугольников при прокрутке страницы на мобильных устройствах.

Пофиксил! Проблема была действительно из-за телефонной адресной строки браузера. Непосредственно фикс: 
 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));
}