Chrome Bar Is on Bottom and I Want It at the Top Again

Viewport units have always been controversial and some of that is considering of how mobile browsers have made things more complicated by having their own opinions nearly how to implement them.

Example in signal: should the scrollbar be taken into account for the vw unit? What about a site's navigation or folio controls — should those count in the calculation? So there are concrete attributes of the devices themselves (hello, notch!) that can't be disregarded.

Get-go, a little context

The spec is pretty vague about how viewport units should be calculated. With mobile devices, we're often concerned with the vertical height, and then permit's look specifically at viewport top (vh):

vh unit of measurement
Equal to 1% of the pinnacle of the initial containing block.

And then yeah, no articulate guidance there when it comes to handling device and browser-specific differentiations.

vh was initially calculated by the current viewport of your browser. If you opened your browser and started to load a website, 1vh was equal to i% of your screen height, minus the browser interface.

But! If you start scrolling, it'south a unlike story. Once you get by a slice of the browser interface, like the accost bar, the vh value would update and the issue was an awkward leap in the content.

Safari for iOS was one of the outset mobile browsers to update their implementation by choosing to define a fixed value for the vh based on the maximum pinnacle of the screen. By doing then, the user would non experience jumps on the page once the address bar went out of view. Chrome'southward mobile browser followed arrange around a year ago.

As of this writing, there is a ticket to address this in Firefox Android.

While using a fixed value is nice, it too ways that you cannot have a full-height chemical element if the address bar is in view. The lesser of your element will exist cropped.

An element gets cropped at the bottom when the address bar is in view (left) just what nosotros want is the full thing (right).

CSS Custom Backdrop: The pull a fast one on to correct sizing

The thought struck me that CSS Custom Properties and a few lines of JavaScript might be the perfect way to go the consistent and correct sizing I needed.

In JavaScript, yous can ever go the value of the current viewport past using the global variable window.innerHeight. This value takes the browser's interface into account and is updated when its visibility changes. The fob is to store the viewport value in a CSS variable and apply that to the element instead of the vh unit of measurement.

Let's say our CSS custom variable is --vh for this example. That means we will want to employ information technology in our CSS like this:

          .my-element {   tiptop: 100vh; /* Fallback for browsers that do not support Custom Properties */   tiptop: calc(var(--vh, 1vh) * 100); }        

OK, that sets us up. Now let's get the inner height of the viewport in JavaScript:

          // Get-go we get the viewport height and we multiple it past 1% to become a value for a vh unit let vh = window.innerHeight * 0.01; // Then nosotros prepare the value in the --vh custom holding to the root of the document document.documentElement.style.setProperty('--vh', `${vh}px`);        

We told JavaScript to grab the height of the viewport and then drilled it down into 1/100th of that total and so we have a value to assign as our viewport height unit value. Then we politely asked JS to create the CSS variable (--vh) at the :root.

Equally a result, we can at present use --vh as our height value like we would any other vh unit, multiply it by 100 and nosotros have the full acme we want.

There is another ready for this that has come up along more recently. Matt Smith documents it here. The play a trick on is min-height: -webkit-fill-available; on the body as a progressive enhancement over 100vh, which should work on iOS devices.

Whoa, there! One more little item.

While our work might look done at this indicate, those of you with an astute eye for particular may have defenseless that the JavaScript fires just never updates the size of our chemical element when the viewport's elevation changes. Get ahead and try resizing the demo above.

Nosotros can update the value of --vh past listening to the window resize effect. This is handy in case the user rotates the device screen, similar from landscape to portrait, or the navigation moves out of view on coil.

          // We listen to the resize event window.addEventListener('resize', () => {   // We execute the same script as earlier   let vh = window.innerHeight * 0.01;   certificate.documentElement.style.setProperty('--vh', `${vh}px`); });        

⚠️ Updating the value of --vh will trigger a repaint of the page and the user may feel a jump as a upshot. Because of this, I'm not advising that this play a trick on should be used for every project or to replace all usage of the vh unit of measurement but simply when y'all may demand your users to have an exact viewport unit value.

Also, you may want to implement a debounce method for the resize event to avoid triggering to many events while the user is resizing their browser'southward window. You lot can learn more than about it with this article: Debouncing and Throttling Explained Through Examples

Y'all can now resize the demo to a higher place and notice that the CSS variable is updated accordingly.

While I recently used this technique on a project and it really helped, you lot should ever think twice when replacing the browser's default behaviors. (For example, this comes up a lot with ::focus.) Likewise, browsers tend to update very fast these days, so beware that today'due south solution may not work tomorrow.

In the concurrently, I hope this commodity helps! 👋

Here's a proposal for vhc and vwc units that may be a savior in all this.

reillyuncealle.blogspot.com

Source: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

Share this post