Некорректное поведение фона в мобильных браузерах

Question

Я делаю скромное портфолио, и все идет хорошо, но когда я захожу на сайт из мобильного браузера (все они) и прокручиваю разделы вниз, кажется, что размер фона постоянно меняется. Такого поведения не произойдет ни на рабочем столе, ни в инспекторе браузеров. Я тестировал его на мобильном телефоне с помощью Google chrome, Opera и firefox с тем же результатом. Я предоставляю снимок экрана, показывающий сбой:

У меня есть фон, помещенный в тег body, а поверх него класс помещает полупрозрачный синий фон. Я думаю, что это могло быть так, но я не знаю наверняка. Некоторый код, который может иметь значение, поскольку весь код слишком длинный:

Фон, помещенный в тело:

* {
    padding   : 0;
    margin    : 0;
    box-sizing: border-box;
}

html {
    font-size      : 10px;
    overflow-x     : hidden;
    scroll-behavior: smooth;
    font-size      : 10px;
}

body {
    background-image     : $background-img;
    background-size      : cover;
    background-position  : center;
    background-repeat    : no-repeat;
    background-attachment: fixed;
    min-height           : 100vh;
    height               : auto;
}

Каждый раздел накладывает новый слой поверх него:

    .section {
        width          : auto;
        height         : auto;
        min-height     : 100vh;
        display        : flex;
        justify-content: center;
        align-items    : center;
        color          : white;
        background-color: #17223bc9;
    }

Вот сайт: https://cromadev.com

Заранее спасибо.

Answer 1

Единицы области просмотра не работают в мобильных браузерах, так как адресная строка / общая GUI многих мобильных браузеров меняет размер при прокрутке вниз, что приводит к изменению размера окна.

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

html {
  height: 100%
}

body {
  min-height: 100%;
}

Возможно, вам придется поэкспериментировать с переключением height и min-height, чтобы все полностью работало для вашего конкретного c варианта использования.

Вы также можете взглянуть на этот проект GitHub, который призван помочь исправить некоторые из этих проблем: https://github.com/rodneyrehm/viewport-units-buggyfill - но я бы порекомендовал вам сначала попробовать проценты.