How to position elements absolute bottom if viewing on iOS Safari 15?

Question

I have a screen height of 100vh with an element that is positioned in the bottom corner of the viewport.

If the user views on the latest iOS Safari, the search bar by default covers up that element.

Is there a way to adjust the position based on this particular browser?

Answer 1

You want the browser to dynamically adapt to the rendered space. To do so, you should use the dvh unit instead of the vh unit.

This unit get updated whenever the browser rendering space get updated (you have an equivalent for all basic viewport units : dvw, dvmin, dvmax).

Answer 2

You can use env(safe-area-inset-bottom), which represents the search bar on iOS. This is by default set to 0.

Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/env

body {
     padding-bottom: env(safe-area-inset-bottom);
}