Handling iOS Safari toolbar for full height web content

Using the dvh unit for content that adapts to the viewport height

UpdatedApril 11, 2024

Handling iOS Safari toolbar for full height web content

Available for consultation.

Senior Frontend Engineer with a Master’s degree in Computer Science – my expertise lies in frontend technologies and driving the direction of frontend engineering to align with business needs.

Initially working with Angular, most of my recent projects involve using Next.js or React, which I’ve now been using for 5+ years. Regardless, my experience is that a strong fundamental understanding of HTML, CSS and JavaScript is what helps us deliver truly next-level user experiences, with frameworks being a declarative way to do so.

Attention to detail is a key aspect for me, in delivering both exquisite and performant frontends. Being conscious about micro-interactions, infrastructure decisions (like CDNs), accessibility, web vitals, SEO and UI/UX best practices are all important factors for me and part of an ever-learning process.

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

How to Override Tailwind CSS Styles in a React Component

The Problem Say you've built a <Button /> component in React that encapsulates your design system and perhaps some business logic to reuse across your React project using Tailwind CSS as the styling tool. It might look something like this: export def...

Jun 30, 20243 min read

How to Override Tailwind CSS Styles in a React Component

Animating a list in React with Framer Motion

Learn list item stagger animation in React by re-creating the iOS Control Centre Focus Modes animation using Framer Motion

Jan 8, 20237 min read

Animating a list in React with Framer Motion

Animating a check icon in React with Framer Motion

Build a re-usable animated check icon component using Animate Presence and Motion Component

Oct 5, 20227 min read

Animating a check icon in React with Framer Motion

Setting up Segment Analytics in Angular with environment files

The techniques described also work for other analytics services like Google Analytics

Oct 2, 20226 min read

Setting up Segment Analytics in Angular with environment files

Frontend Engineering | Sabhya Verma

5 posts

Available for consultation. Senior Frontend Engineer – my expertise lies in frontend technologies and driving the direction of frontend engineering to align with business needs

I recently ran into an issue where I had some content to display that spans the full height of the device and the code was using height: 100vh to achieve the same. When testing on iOS Safari, you'll see there's an issue with this:

100vh on iOS Safari adds a scroll bar and cuts off bottom content

As seen in the above screenshots from Safari on an iPhone, using 100vh introduces a scrollbar when the Safari toolbar is visible and cuts off the bottom content.

This is because the vh unit computes the viewport size without factoring in the toolbar height. Thus, the user either needs to scroll down for the address bar to automatically disappear or manually hide it for all content to be displayed.

Unfortunately, there's no way to programmatically hide the toolbar on iOS Safari using JavaScript at the time of writing. However, there is a solution for the content to adapt with the toolbar using the dvh unit.

The dvh unit stands for dynamic viewport height and enjoys support from all the latest browsers. This unit factors in the viewport that's truly visible to users.

In case, you want to work with earlier versions of browsers that don't support dvh, you can make use of the @supports CSS rule.

Here's an example of how you'd set up a class called full-viewport-height that adapts according to the browser viewport using the dvh unit but falls back to vh if the browser doesn't support it:

.full-viewport-height {
  height: 100vh;
}

@supports (height: 100dvh) {
  .full-viewport-height {
    height: 100dvh;
  }
}

Using this full-viewport-height on our container now, the result looks as expected:

100dvh on iphone safari adapts to full viewport height

The content using 100dvh now spans the whole height of the web page even if the Safari toolbar is visible and on scrolling down or hiding it, the content adapts to fill the whole page making sure your content always covers the viewport as expected.

You can find the code sandbox for the above examples at vh-sandbox and dvh-sandbox.

Command Palette

Comments

More from this blog