移动端预加载器首次访问时垂直不居中的问题求助及原理咨询

我现在遇到一个特别困惑的问题，搞不懂移动端预加载器的布局逻辑，想请大家帮忙解惑。

情况是这样的：我做的预加载器在桌面端（包括用DevTools模拟各种移动端布局）都能完美实现垂直水平居中，但用自己的手机首次访问（输入IP+端口）时，预加载器里的文本不是垂直居中的，会明显偏下；可只要我触摸屏幕和页面交互一下，它就立刻跳到居中位置了，而且刷新页面的话，首次加载也是正常居中的——唯独第一次打开链接的时候会出问题，哪怕只是一段简单的文本，不管怎么调整样式都没法让它在首次加载时居中。

这让我意识到自己对移动端浏览器的布局渲染逻辑理解得不够透彻，急需这方面的知识科普和问题排查思路。

一开始我怀疑是现有项目的代码问题，于是新建了一个完全干净的Next.js项目来测试，结果还是出现了同样的问题：

测试用代码详情 #

根页面 page.js

import Loading from './components/Loading';

export default function Home() {
  return (
    <Loading />
  );
}

Loading 组件

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

const Loading = () => {
  return (
    <div className={styles.landingLoadingDiv}>
      <p className={styles.loadingText}>NextJS</p>
    </div>
  );
};

export default Loading;

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;
}

我可以确定样式本身是没问题的，问题肯定出在我不了解的移动端浏览器渲染机制上。

附问题的实际效果截图：

备注：内容来源于stack exchange，提问作者ssrose97