Mobile pre-loader not centered in NextJS

I am facing issue understanding how mobile pre-loader works. So I have a pre-loader which is centered perfectly fine vertically and horizontally on Desktop screen. I can open up dev tools and see the same on all layouts it is perfectly centered and responsive.

Now the issue happens on my own phone. If I hit the url (My ip + port), the page loads and the pre-loader/text is not centered vertically but a bit to the bottom. If I touch the screen and interact with it then suddenly it comes into the centre. If I refresh the page then on first load it is centered. The issue only happens when I hit the url for the first time even a simple text won’t be centered no matter what style I apply.

It leads me to believe that I lack information on how mobile browser layout works and need some help understanding it.

I thought it might be an issue with my project but I created a fresh NextJS project.

This is my root page.js:

import Loading from “./components/Loading”;

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

And this is my Loading component:

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

I know styling is not an issue, this is something that I don’t understand with how mobile rendering is working.

Here is what it visually looks like:
https://imgur.com/a/8hQhEHD