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

user_1252920 0
Viewed 1053

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?

ios15 fixed css-position mobile-safari css
1 Answers

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)

user_155590070
Related