Мобильный предварительный загрузчик не по центру ⇐ CSS

[Anonymous]

Я столкнулся с проблемой понимания того, как работает мобильный предварительный загрузчик. Итак, у меня есть предварительный загрузчик, который идеально центрируется по вертикали и горизонтали на экране рабочего стола. Я могу открыть инструменты разработки и увидеть одно и то же во всех макетах, они идеально центрированы и отзывчивы.
Теперь проблема возникает на моем телефоне. Если я нажму URL-адрес (Мой IP + порт), страница загрузится, и предварительный загрузчик/текст будет не по центру по вертикали, а немного вниз. Если я прикасаюсь к экрану и взаимодействую с ним, то вдруг он оказывается в центре. Если я обновлю страницу, то при первой загрузке она будет центрирована. Проблема возникает только тогда, когда я впервые нажимаю на URL-адрес, даже простой текст не будет центрирован независимо от того, какой стиль я применю.
Это заставляет меня думать, что мне не хватает информации о как работает макет мобильного браузера, и мне нужна помощь в понимании этого вопроса.
Я подумал, что это может быть проблемой в моем проекте, но создал новый проект Next.js.
Это моя корневая страница.js:
import Загрузка из ./comComponents/Loading;

Код: Выделить всё

export default function Home() {
return (

);
}

А это мой компонент загрузки:

Код: Выделить всё

import styles from "./Loading.module.css";

const Loading = () => {
return (

NextJS

);
};

export default Loading;

Загрузка.module.css:

Код: Выделить всё

.landingLoadingDiv {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}

.loadingText {
font-size: 2rem;
font-weight: 600;
margin: 0;
}

Я знаю, что стиль — это не проблема, я не понимаю, как работает мобильный рендеринг.
Вот что это такое визуально выглядит так:



Подробнее здесь: https://stackoverflow.com/questions/792 ... t-centered