Website layout render bug with 100% html & body height

Description

When you use 100% html and body height, Brave incorrectly renders website, until you manually scroll the website.

html, body {
  height: 100%;
}

Steps to reproduce

Create a simple index.html with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
  * {
    margin: 0;
    padding: 0;
  }

  html, body {
    height: 100%;
    background: linear-gradient(180deg, black 0%, red 100%);
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  h1 {
    color: white;
  }
</style>
</head>

<body>
<h1>Foobar</h1> 
</body>
</html>

Open the file in your Brave browser on your phone (either open locally or host on a server if available).
The website should be rendered incorrectly. You should see that the text "Foobar" is not in the middle. Scroll up/down with your fingers & the layout will get adjusted to it's correct state. Both "Foobar" text and the gradient background will change position.

See the attached video below for visual explanation.

Actual result

Website is rendered incorrectly, with a "shifted layout".

https://github.com/user-attachments/assets/4feb0992-ae9f-4211-9626-efc52a3690c1

Expected result

Website should be rendered normally, without any "layout shifting". Like this: expected

Reproduces how often

Easily reproduced

Brave version

Brave 1.68.128, Chromium 127.0.6533.73

Device

Brand/model: Google Pixel 8 Pro
Android version: 14

(Tested on 2 different Android devices, both return the same result.)

Channel information

[X] release (stable)
[ ] beta
[ ] nightly

Reproducibility

[X] with Brave Shields disabled
[X] with Brave Rewards disabled
[ ] in the latest version of Chrome

Miscellaneous information

Issue seems to occur only on mobile version of Brave. Could not reproduce on Desktop.
Issue also occurs when I check the "Desktop site" checkbox.
I tested this behavior on Firefox & Chrome and I could not reproduce this issue, seems it's specific to Brave.
It only happens when you refresh the website by clicking in the address bar and clicking "ENTER" (Go). It does not happen when you scroll down to refresh the website.
Only the html, body styles are necessary for a reproduction of this issue. Other styles, the meta tag & <h1> element were added just for convenience & better visualization. The actual minimal reproducible example code looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      html, body {
        height: 100%;
        background: linear-gradient(180deg, #000000 0%, red 100%); <!-- to see the layout being shifted -->
      }
    </style>
  </head>

  <body></body>
</html>

brave / brave-browser

Website layout render bug with 100% html & body height #40255