CSS3 100vh not constant in mobile browser

😎 Solving the Issue of CSS3 100vh Not Being Constant in Mobile Browsers

Are you facing an odd issue where the CSS3 100vh property is not constant in mobile browsers? You're not alone! Many developers have encountered this behavior, which can be frustrating and lead to a bad user experience. But don't worry, I've got you covered with some easy solutions. 🛠️

The Problem Explained

Here's what typically happens:

• When you load a web page in a mobile browser, there is a top menu (address bar, toolbar, etc.) that slides up and disappears as you start scrolling.

• The CSS3 100vh unit is supposed to represent 100% of the viewport height, but sometimes it only calculates the visible part of the viewport.

• When the browser bar slides up, the viewport height increases (in terms of pixels), causing layout re-paint and re-adjustment.

• This leads to a jumpy effect in terms of user experience, which is far from ideal. 😫

Possible CSS Solutions

While JavaScript with a resize event can be a reliable solution, let's explore some CSS alternatives first:

1. Flexbox Magic

One way to solve this problem is by using flexbox, which provides a flexible and dynamic layout. Here's how:

.vhbox {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

👆 This CSS code makes the .vhbox element a flex container and ensures that its minimum height is always equal to 100% of the viewport height. This way, the layout remains intact when the browser bar slides up.

2. The Power of Position: Sticky

Another CSS solution involves utilizing the position: sticky property. Here's what you can do:

.vhbox {
  position: sticky;
  top: 0;
  height: 100vh;
}

👆 By setting the .vhbox element to position: sticky, you make it stick to the top of the viewport. Additionally, setting its height to 100vh ensures that it spans the entire visible viewport.

Trying Out the Solutions

To see these solutions in action, you can visit the sample site provided here. Note that you may need to test it on mobile browsers to experience the issue firsthand.

One Last Thing... JavaScript to the Rescue!

While CSS can help tackle this problem, JavaScript can provide a more foolproof solution. Monitoring the resize event and adjusting the dimensions accordingly ensures consistent behavior. Here's an example of how you can achieve this using jQuery:

$(function() {
  var resized = -1;
  $(window).resize(function() {
    $('#currenth').val($('.vhbox').eq(1).height());
    if (++resized) $('#currenth').css('background-color', '#00c');
  }).resize();
});

👆 In this code snippet, jQuery is used to handle the window resize event. By setting the background-color of the #currenth input element, you can visually track whether the resize event is fired.

Engage With Me!

I hope these CSS and JavaScript solutions have helped you overcome the issue of CSS3 100vh not being constant in mobile browsers. If you have any questions, comments, or alternative solutions, feel free to reach out and share your thoughts 🗣️. Together, let's make the web a better place for everyone! 🌐💻

Now it's your turn! Have you encountered this issue before? What workaround or solution did you find? Let's discuss in the comments below! 👇