The iOS Safari Full-Height Video Fix That Actually Works (After 4 Hours of Everything That Doesn't)

Source: Dev.to

The problem

If you’ve tried to make a full‑screen hero video work on iOS Safari, you’ve probably spent hours reading the same recycled advice that doesn’t actually solve the problem. The bottom of the video keeps getting cut off, or there’s a gap, or the content below the fold is hidden behind Safari’s toolbar.

What the internet tells you to try

• 100vh – Too tall. Safari calculates this based on the viewport with toolbars hidden, not what the user actually sees.
• 100svh – The “small viewport height” that’s supposed to fix this. Doesn’t work reliably.
• 100dvh – The “dynamic viewport height” that updates as toolbars show and hide. Causes layout jank and still doesn’t solve the problem.
• 100lvh – The “large viewport height.” Gets closer but still falls short on larger iPhones.
• -webkit-fill-available – Only works on WebKit, breaks Chrome, and fails when nested.
• JavaScript solutions using window.innerHeight – innerHeight gives the current visible height (the short one), so you’re back where you started.
• env(safe-area-inset-bottom) with viewport-fit=cover – Useful for padding content away from the notch and home bar, but doesn’t fix the fundamental height issue.

All of these were tried, combined, and iterated on for hours, yet the video remained short on taller phones.

What actually worked

/* hero.css */
.hero {
  min-height: calc(100lvh + 60px);
}

Make the hero intentionally taller, then adjust the positioning of bottom‑aligned elements (e.g., change bottom: 15% to bottom: 25% on mobile) so they sit comfortably within the visible area on initial load.

Conclusion

It isn’t elegant, and it feels like a hack, but users only notice whether the hero video fills the screen or looks broken. Adding a bit of extra height ensures the video isn’t cut off, and the extra pixels are simply scrolled past—something most users won’t even notice.

If you’ve discovered a cleaner, reliable solution for iOS Safari’s viewport quirks, feel free to share it in the comments. Until then, making the hero slightly too tall and adjusting content positioning is a pragmatic way to get the job done. Good luck!