Safari iOS 15移动版:固定了当底部栏消失时元素跳转

Question

假设我们有一个固定的边栏，这是:

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

当Safari底部栏是可见的时候，它是可以的，但是当向下滚动时，它消失了，侧边栏停留一段时间，然后跳跃到填充下面的空间。它看起来有很多bug。

我试图用以下每个解决方案替换height，但都不起作用:

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;

有什么解决办法吗?

Answer 1

您应该使用环境变量safe-area-inset-bottom作为底部边距或填充。

你可以在Jen Simmons的视频中看到一个例子(从16:44分钟开始)

Answer 2

尝试dvh(动态视口高度).

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

Answer 3

这个对我很有用:

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