Preventing Layout Shift in Chrome on iOS Mobile with 100vh Hero Headers

you can use DVH. Just type 100 dvh in the height input.

Hi Matt thanks for looking at this. Actually when I use dvh the problem shows up on safari aswell. I made a video to illustrate the issue. Safari and chrome seem to handle this differently.

Would you mind sending a read-only link?

Sure here you go. Thank you

so whats your expectation on mobile for the hero header?

I don’t want the two blocks of the hero header to shrink with the navbar animation

The navbar animation on Chrome mobile ios when I scroll down makes these two blocks change size.

alright, so we should remove the 100 dvh/svh all together then yeah? Since what they are trying to do is take up 100% of the viewport height.

I think there's probably a few other things going on here though

Well I want each one of them to have 50 svh height

when they are stacked on mobile

This is a bit embarassing but I found the issue. I didn’t update my iphone for a while and it was running a different version of Chrome IOS!

okay, I had a video I was going to share with you but ultimately couldn't reproduce the issue you were seeing so I guess that makes sense!