I’d like to use svh viewport units for the first section of my landing page, and while they work great on standard mobile browsers, they function the same as dvh units in in-app browsers like Google Search and Instagram. This causes some clunky snapping when I’m scrolling down through the rest of the landing page. How can I fix this to fully display the first section of the landing page (which is why we use svh units), without having it expand/change size with respect to the browser elements (like you’d expect to happen with dvh units)?
Is this just a bug in the browsers’ rendering engines? It seems like mobile Safari used to have this issue as well: SVH units not working properly in mobile Safari
This is what we’ve tried, along with standard vh units etc.
HTML snippet
`your text`<body data-new-gr-c-s-check-loaded="14.1196.0" cata-ar-ext-installeos == $0.
<header>...</header>.
<section class="hero">...</section>.
<section class="calculator" id="calculator" data-controller="home-page">...</section>.
CSS snippet
@media screen and (max-width: 767px) {.
.hero {.
height: 100svh;
max-height: 100vh;
}.
}
Thank you!
Jesse S is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.