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

[Anonymous]

Я столкнулся с проблемой понимания того, как работает мобильный предварительный загрузчик. Итак, у меня есть предварительный загрузчик, который идеально центрируется по вертикали и горизонтали на экране рабочего стола. Я могу открыть инструменты разработки и увидеть одно и то же на всех макетах: они идеально центрированы и отзывчивы.
Теперь проблема возникает на моем телефоне. Если я нажимаю URL-адрес (Мой IP + порт), страница загружается, и предварительный загрузчик/текст располагается не по центру по вертикали, а немного вниз. Если я прикасаюсь к экрану и взаимодействую с ним, он внезапно оказывается в центре. Если я обновлю страницу, то при первой загрузке она будет центрирована. Проблема возникает только тогда, когда я впервые нажимаю на URL-адрес, даже простой текст не будет центрирован, независимо от того, какой стиль я применю.
Это заставляет меня думать, что мне не хватает информации о как работает макет мобильного браузера, и мне нужна помощь в понимании этого вопроса.
Я думал, что это может быть проблемой с моим проектом, но создал новый проект NextJS.
Это моя корневая страница.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://imgur.com/a/8hQhEHD

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