The one problem with vh is when you scroll on mobile and its address bar hides it changes its value to a larger one. If your page has a bunch of hero style sections on the page at 100vh this causes the page to jump the scroll position every time you scroll the page up and down and the address bar hides or shows
webdev @ Autodesk |
Someone used to call me "Learn more", and I'm spending forever to live up to it. You'll find me dabbling in random stuff 👨💻 or missing a wide open shot in 🏀
Yeah unfortunately the vh unit is almost useless on iOS Safari. I believe the trick is to use height: 100% on html element and then pass that down to the body and any container with flex or grid.
Yes that only works on items at the top for heros. It doesn't allow you to use it mid-page.
It's a well konwn issue. I solved it just using JavaScript on load to set the height and add data-vh="100" where you can pass in a percentage of the view height then it sets it to pixels after load. I will enhance it to detect resizing from address bar hiding (perhaps if resize happens at same time as scroll) vs normal resizing and sort it that way.
webdev @ Autodesk |
Someone used to call me "Learn more", and I'm spending forever to live up to it. You'll find me dabbling in random stuff 👨💻 or missing a wide open shot in 🏀
The one problem with vh is when you scroll on mobile and its address bar hides it changes its value to a larger one. If your page has a bunch of hero style sections on the page at 100vh this causes the page to jump the scroll position every time you scroll the page up and down and the address bar hides or shows
Thanks! I'll try to repro and add a note to the article.
Yeah unfortunately the
vhunit is almost useless on iOS Safari. I believe the trick is to useheight: 100%onhtmlelement and then pass that down to the body and any container with flex or grid.developers.google.com/web/updates/...
Yes that only works on items at the top for heros. It doesn't allow you to use it mid-page.
It's a well konwn issue. I solved it just using JavaScript on load to set the height and add data-vh="100" where you can pass in a percentage of the view height then it sets it to pixels after load. I will enhance it to detect resizing from address bar hiding (perhaps if resize happens at same time as scroll) vs normal resizing and sort it that way.
Thanks for the heads up. I didn't get a chance to try this yet on iOS or Safari. I'll test it out and add it to the article