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 🏀
Yeah unfortunately the
vh
unit is almost useless on iOS Safari. I believe the trick is to useheight: 100%
onhtml
element 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