Discussion on: Don't use 100vh for mobile responsive

[JoelBonetR 🥇]

Sure that last paragraph is what solves any situation I can think off, there's no point of discussion here.

I'm trying to define in my head all the situations in which that makes a real difference and not just a "some pixels extra-scroll" thingy, and asking me "is there any alternative way?" Just because linking information is the way I can remember something for years plus I usualy learn something else while trying to answer the question 😅.

[Ivan Jeremic]

@joelbonetr I don't support IE too but we have a new IE on the block called Safari which is the worst in implementing standards and compatible APIs. They are literally thinking browsers are not needed anymore and in a few years they are gone and everything is an app...

[JoelBonetR 🥇]

Hahaha I know, they have implemented better flex compat in the last 2 years at least, it was a pain in the ass before that but yes, Safari is the new IE.

I work with Windows 11 + WSLg in my personal desktop and Windows 10 + WSL2 in company's laptop so I bought an iPad mini just to test things in Safari as reference (or in any browser because in iPad OS or iOS all browsers rely on Safari 😐).

[Daniel]

@joelbonetr

When using SSR you can not pre-render window/document API-related stuff. So you need to defer this to the client, which usually deals to CLS (Cumulative Layout Shifting) and thus a worse user-experience and a worse score in core web vitals, which lowers your SEO

Just embed the script before the content like so:

<script>
function calcVh() { document.style.setProperty("--100vh", `${window.innerHeight}px`); }
calcVh();
</script>

No issues with SSR and SEO at all.

You need to observe a given identifier to know when it exists, otherwise you can get a "Can't get innerHeight of undefined", which means you add an extra event-listener i.e. resize event.

A drop in the sea. Just add to the script above the following:

window.addEventListener("resize", calcVh);