Relume Community Icon
Relume Community
  • 馃彔Home
  • 馃搮Events

  • 馃數Announcements
  • 馃數General
  • 馃數Getting Started
  • 馃數Issues
  • 馃數Showcase

Powered by Tightknit
Issues
Issues

Fixing Layout Shifts in 100svh Height Hero Headers on iOS Chrome

Avatar of Alexy D.Alexy D.
路

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?

13 comments

  • Avatar of Matt J.
    Matt J.
    路

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

  • Avatar of Alexy D.
    Alexy D.
    路

    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.

  • Avatar of Matt J.
    Matt J.
    路

    Alexy D. Would you mind sending a read-only link?

  • Avatar of Alexy D.
    Alexy D.
    路

    Sure here you go. Thank you

  • Avatar of Matt J.
    Matt J.
    路

    Alexy D. so whats your expectation on mobile for the hero header?

  • Avatar of Alexy D.
    Alexy D.
    路

    I don鈥檛 want the two blocks of the hero header to shrink with the navbar animation

  • Avatar of Alexy D.
    Alexy D.
    路

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

  • Avatar of Matt J.
    Matt J.
    路

    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.

  • Avatar of Matt J.
    Matt J.
    路

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

  • Avatar of Alexy D.
    Alexy D.
    路

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

  • Avatar of Alexy D.
    Alexy D.
    路

    when they are stacked on mobile

  • Avatar of Alexy D.
    Alexy D.
    路

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

  • Avatar of Matt J.
    Matt J.
    路

    Alexy D. 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!