I’ve build this website, where on the hero I’m using a 100VH background video. Previously, it was a static image (also set to 100VH).
When I changed the hero image to a video, I noticed that for some reason the website is displayed weirdly on Safari mobile. On all other browsers – I tested on Chrome and Brave – it looks fine, like I’d expect from the Editor.
Is there something I’m doing wrong for Safari specifically?
On Safari:
The 100VH setting seems bigger than my screen
The hero-text gets pushed down, so it’s not visible when you land and you have to scroll.
Attaching the two screenshots, from safari and brave, and hope someone will be able to help!
Unit dvh reflects the current viewport height. This unit excludes the user agent’s interface, unlike unit vh, and updates as the current viewport height changes.
I’ve run into the same issue with my website on mobile when using 100vh for a background video. Safari calculates 100vh differently because it includes the browser’s UI elements, which can push your content down and make the hero section look off.
What worked for me was switching to height: 100svh, which adjusts for Safari’s quirks and keeps the video and text properly aligned. However you should downlaod terabox mod apk for better experience.
