# Safari's 100vh Problem

DevFeed: [Safari's 100vh Problem](<https://devfeed.tech/articles/safari-s-100vh-problem-19122.md>)

Original publisher: [Read original article](<https://medium.com/rbi-tech/safaris-100vh-problem-3412e6f13716?source=rss----904782439303---4>)

Author: Jon Rose

Published: 2020-06-17T19:14:35Z

Content type: tutorial

Language: en

Sources: [RBI Tech](<https://devfeed.tech/sources/rbi-tech.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [iOS](<https://devfeed.tech/topics/ios.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [100vh](<https://devfeed.tech/tags/100vh.md>), [blog-post](<https://devfeed.tech/tags/blog-post.md>), [css](<https://devfeed.tech/tags/css.md>), [css3](<https://devfeed.tech/tags/css3.md>), [ios](<https://devfeed.tech/tags/ios.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [safari](<https://devfeed.tech/tags/safari.md>)

## AI overview

This tutorial explains how Safari on mobile handles the CSS 100vh unit. Safari keeps the viewport height constant while its button bar hides and reappears, which can cover content or navigation. The article recommends positioning for navigation and using JavaScript with innerHeight when content height must reflect the visible viewport.

## Source excerpt

Safari, being an Apple product, tends to "Think Different". Given Apple's dominant market share, especially in the US, it's important that we understand these differences, and know how to work with them. In this blog post, we're going to tackle the 100vh problem. 100vh Quick recap. The vh unit, introduced with CSS3, allows you to specify the percent of the total viewport's height. So 100vh would be 100% of the viewport. It's mobile responsive and has made building layouts much easier. Navbar Problem Let's try making a simple homepage with a footer for navigation. https://medium.com/media/cff698e095a28a6928ff7148fc3c694d/href In the main element is our content. We give it a height of 95vh or 95% of the total height. The footer gets the remaining 5% of the viewport. If we load this up on a desktop, it works exactly as expected. Checking Safari on mobile and we see: Why? This must be a bug, right? Well, no. This is actually a feature. When working on Safari, the team worked hard to show the button bar only when necessary. Their goal was to give more space to the website whenever possible, which is why the button bar hides when scrolling. This lead to a tough decision about how the viewport's height would be handled. Would it: 1. change the height every time the bar hides and shows or 2. make the viewport height constant, and have the button bar cover part of the viewport They opted for a constant height to avoid jankiness. This means that our navbar is in fact there, just hidden behind the button bar. When the button bar hides, we can see the navbar really was there. Navbar Solution So what do we do? Instead of placing our navbar by using height, we use positioning instead. https://medium.com/media/20c4987011013a9c0c01fd1b0ce9aceb/href Checking it out on desktop and we can see nothing changed: And now on mobile, we finally get what we expect. Content Problem The navbar example is a bit contrived. Hopefully you wouldn't use height for positioning regardless of the 100vh