Prevent content from being hidden underneath the Virtual Keyboard by means of the VirtualKeyboard API

One of the problems on mobile devices is that the keyboard can hide some of your content. The VirtualKeyboard API aims to solve this. The Problem The current behavior on mobile devices is that as the keyboard gets shown, the Layout Viewport remains the same size but the Visual Viewport shrinks. Because layout items with …

100vh in Safari on iOS

When working with Viewport Units there’s this longstanding and extremely annoying bug in Safari on iOS where it does not play nice with the vh unit. Setting a container to 100vh for example will actually result in an element that’s a wee bit too tall: MobileSafari ignores parts of its UI when calculating 100vh. Image …

The ultimate guide to CSS Viewport Units

Ahmad Shadeed has done an extensive write-up on Viewport Units: In this article, we will learn about CSS viewport units and how to use them, along with some use-cases and solutions for common issues. Let’s start and dig in! It’s great to see that it’s an all-in-one article, covering use cases such as Viewport Unit …

Rendering Sites Fullscreen in Safari on iPhone X / Introducing “User Agent Variables”

What the …? By default, the new iPhone X in landscape mode will contain sites in the so called “safe area”, resulting in white bars being rendered on either side of the site (src). The color, white by default, can be tweaked by altering the background-color on the <body> element. Do note that it’s only …

Making viewport units work properly in Mobile Safari

A typical issue with the well supported Viewport Relative Units (you know: vh, vw, vmin, and vmax) that bothers me a lot is that MobileSafari (Safari on iOS) takes the height of the address bar into account for 100vh. Take a look at the footer of that first block in the screenshot below: since its …

Viewports Visualisation App

PPK: Instead of the work I was supposed to do I spent about a day and a half on the alpha version of a viewports visualisation app. It’s already been very useful to me, since figuring out how the viewports actually work is necessary for full understanding. I hope it does the same for you. …