Почему размер фонового изображения изменяется при прокрутке на мобильном телефоне? ⇐ CSS

[Anonymous]

По какой-то причине мой div с фоновым изображением увеличивается при прокрутке страницы на мобильном устройстве. Я погуглил, и кажется, что у других тоже была эта проблема, но я не нашел удовлетворительного решения, если таковое имеется. Но я нашел это: https://www.w3schools.com/howto/tryhow_ ... x_demo.htm (отсюда: https://www.w3schools.com/howto/howto_css_parallax.asp), и оно работает нормально. Так что же w3schools делает по-другому? Я проверил их код, но не нашел ничего существенного.

(К вашему сведению, у меня все еще есть проблема, даже без эффекта параллакса из «background-attachment: fix»; и даже без единицы измерения высоты vh).

Вот мой код:

HTML:

Добро пожаловать в ресторан Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. CSS:

.landingContainer { дисплей: гибкий; гибкое направление: столбец; оправдание-содержание: центр; выровнять-элементы: по центру; фоновое изображение: линейный градиент (rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url('/src/comComponents/Home/homeImages/pexels-emre-can-acer-2079438.jpg'); фоновая позиция: центр; фоновый повтор: без повтора; размер фона: обложка; фоновое вложение: исправлено; ширина: 100%; минимальная высота: var(--vh100); отступ: 1рем; белый цвет; выравнивание текста: по центру; переполнение-обертка: где угодно; } .landingContainer h1 { размер шрифта: зажим (2.2rem, 2.0058rem + 1.2427vw, 3rem); /* https://css-tricks.com/linearly-scale-f ... -edge-case */ вес шрифта: 600; маржа: 1em 0,5em; белый цвет; } .landingContainer h2 { размер шрифта: зажим (1рем, 0,9892рем + 0,0693vw, 1,1рем); вес шрифта: 300; ширина: 85%; максимальная ширина: 45 каналов; высота строки: 1,6; } Спасибо!

Обновление: смотрите видео здесь: https://imgur.com/a/ZFWgdqr