Relume
Log in

Community forum for knowledge and support

Updated last year

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

At a glance

The community member is experiencing a layout shift issue with a 100 svh height hero header component on Chrome for iOS mobile. They tried using 100 dvh, but the issue persisted on Safari as well. The community members discussed various approaches, such as removing the 100 dvh/svh altogether, and setting each block to 50 svh height when stacked on mobile. Ultimately, the community member found that the issue was due to an outdated version of Chrome on their iPhone, and the problem was resolved after updating the device.

AAlexy De Valkeneer
·

Hi guys!

When using 100 svh height hero header components I get this layout shift in Chrome on ios mobile. The height of the header shifts everytime the adres bar and toolbar slide in. Is there anyway to fix this?

M
A
13 comments
MMatt Johnson

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

AAlexy De Valkeneer

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.

MMatt Johnson

Would you mind sending a read-only link?

AAlexy De Valkeneer

Sure here you go. Thank you

MMatt Johnson

so whats your expectation on mobile for the hero header?

AAlexy De Valkeneer

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

AAlexy De Valkeneer

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

MMatt Johnson

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.

MMatt Johnson

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

AAlexy De Valkeneer

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

AAlexy De Valkeneer

when they are stacked on mobile

AAlexy De Valkeneer

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!

MMatt Johnson

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!

Add a reply
Sign up and join the conversation on Slack