Safari iOS 15 mobile: fixed element jumps when bottom bar disappears

Question

Say we have a fixed sidebar, this:

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 17em;
  height: 100%;
}

When the Safari bottom bar is visible it's ok, but when scrolling down it disappears and the sidebar remains for a while where it was and then jumps to fill the space below. It looks very buggy.

I tried to replace height with each one of the below solutions but none worked:

height: 100vh; // Sidebar is under the bottom bar

height: -webkit-fill-available; // Sidebar doesn't adjust its height

height: var(--window-inner-height); // CSS prop set via JS window.innerHeight. Same above

bottom: 0;

Any idea to solve?

Answer 1

You should use the environment variable safe-area-inset-bottom in your bottom margin or padding.

You can see an example in this video by Jen Simmons (see from 16:44 min)

Answer 2

Try dvh (dynamic viewport height).

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 17em;
  height: 100dvh;
}

Answer 3

This did the trick for me:

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