Kevin Powell | The Problems with Viewport Units
Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons.
2023-02-16 19:00:00 - Kevin Powell
From creating horizontal scrolling to accessibility issues and more, in this video I look at the problems that people run into by using them and offer up some alternatives.
As of March 2022 new CSS viewport units svh, lvh, dvh, svw, lvw, and dvw are available as Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla help us, developers, improve the web. As part of a project called Interop 2022. Who had ever thought!
These new CSS units are there to better reflect the viewport's minimum, maximum and current dimensions. For developers this used to require both CSS and JavaScript.
This means that there has never been a clean or built-in solution for issues regarding viewport height excluding the interface of mobile viewports, the URL bar for example.
Overview of current viewport units (as of March 2022)
- VH, the height of the viewport.
Before 2017, Chrome for Android would update the value of vh whenever the currently visible viewport height changed due to the interface of the browser changing.
This caused layout shifts when, for instance, the address bar would move out of view due to scrolling down a web page. Safari for iOS was one of the first mobile web browsers to change the value of the vh unit to refer to the largest possible viewport height.
Chrome for Android changed the implementation of unit vh accordingly in version 56.
- VW, the width of the viewport.
There has been frustration and debate about unit vw including the scrollbar that may or may not be present on the right side of your viewport, causing a horizontal scrollbar when applying 100vw on an HTML element inside of a scrollable web page.
Web browser developers have discussed this and decided not to subtract the scroll bar width from the vw unit.
Whether the scrollbar's width should be subtracted from vw or not depends on whether the web page has content that overflows the root vertically.
That means that the web browser can only know whether or not to subtract the scrollbar width if the whole web page has already rendered.
This means that a forced recalculation of styles would occur after the web browser finds out that a scrollbar has appeared due to rendered content overflowing the root.
That is the reason why web browser developers decided to keep the calculation of the vw unit as is.
- sv, Small Viewport Units
The small viewport-percentage units (sv*) are defined with respect to the small viewport size: the viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be expanded.
Essentially, svh gives you units that you can use to fill the screen when the browser UI is at its largest, and the website content is at its smallest.
- dv, Dynamic Viewport Units
The dynamic viewport-percentage units (dv*) are defined with respect to the dynamic viewport size: the viewport sized with dynamic consideration of any UA interfaces that are dynamically expanded and retracted.
This allows authors to size content such that it can exactly fit within the viewport whether or not such interfaces are present.
The sizes of the dynamic viewport-percentage units are not stable even while the viewport itself is unchanged.
Using these units can cause content to resize e.g. while the user scrolls the page. Depending on usage, this can be disturbing to the user and/or costly in terms of performance.
00:00 | Introduction
00:22 | Issue 1: Using 100vw
02:00 | Issue 2: The problem with 100vh
07:28 | Issue 3: Fluid Layouts