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

    @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));
    }
    Ответ написан
    Комментировать