Introducing new viewport units

[mirko-pagliai]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

This is my first issue here, I hope I'm not doing anything wrong.

I've been using the min-vh-100 class for the past few months and I've quickly noticed that at least on mobile and chrome-based browsers the results are often unpredictable (so I guess vh-100 class is also involved, while there is no problem on desktops).

The problem is not with Bootstrap, but with how these browsers think about viewport height. Searching on the net I founded that three new viewport units (for height and width) have been introduced:

• svh and svw - Smallest possible viewport (i.e. doesn't include address bar)
• lvh and lvw - Largest possible viewport (i.e. includes address bar)
• dvh and dvw - Dynamic viewport (i.e. changes depending on whether address bar is visible)

In my case (chrome on android, more precisely) the default viewport is the largest (so min-vh-100 behaves as with lvh unit).

Now I am absolutely no expert here, so I was wondering if:

• is it possible and makes sense to modify vh-100/min-vh-100 classes, using the dvh unit (and using backwards compatibility with vh for other browsers). This is what I (as a bootstrap user) would expect;
• introducing new classes like min-dvh-100, min-lvh-100 and so on...

References:

• web.dev
• Mozilla reference
• "Can I Use" support for viewport unit variants

Reduced test cases

No reduced test cases

What operating system(s) are you seeing the problem on?

Android

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3