While I understand that using height: 100vh on mobile is generally discouraged for various reasons, I'm curious as to why height: 100vh paired with width: 100vh in Next.js doesn't produce the expected result. Instead of a full-height square, I end up with a shape that doesn't span the entire page or browser height when viewed on mobile devices. This issue seems to be isolated to mobile devices, as resizing the window doesn't present the same problem. The discrepancy occurs consistently across both Chrome and Firefox.
section {
background: blue;
height: 100vh;
width: 100vh;
}<section></section>