Safari视口错误，具有固定位置和底部或顶部的问题

Question

我在iOS 12.3.1 Safari中遇到了一些奇怪的事情。 此问题至少可以追溯到iOS 12.2，，但我想这已经是一个更长的问题了。

当尝试将元素与视口的底部轴对齐时，该问题就会显现出来，并且在纵向和横向模式下都是问题。

为了重现该问题，该元素必须具有position或fixed的{​​{1}}，但是将元素放置在absolute上并不重要和top或transform。

肖像模式

该问题仅在纵向模式下显示，如果Safari显示其压缩的URL栏，它将替换常规的URL和菜单栏，并且没有垂直溢出。

普通URL和菜单栏//压缩URL栏

值得注意的是，只有在出现垂直溢出并且浏览器向下滚动或浏览器的方向从纵向更改为横向然后再次返回时，才会显示压缩菜单栏（尽管是否存在垂直溢出） ）。

具有垂直溢出的更改方向//没有溢出

我不确定这里到底发生了什么。

风景模式

横向模式的问题始终且仅在页面顶部显示常规导航栏时才会发生。由于向下滚动或方向从纵向更改为横向，因此导航栏仅在横向模式下处于隐藏状态。

具有垂直溢出

没有垂直溢出

有趣的是，横向模式下导航栏的高度明显偏移了视口，因此在显示导航栏时，bottom或bottom: 0的位置被推到视口之外。< / p>

人像模式的“变通办法”

这是一个超级hack的解决方法，也是一个糟糕的解决方法，但这是迄今为止唯一导致top: 100%在没有方向切换后实际上将元素放置在视口底部的操作溢出。

position: fixed; bottom: 0;

但是，我只是注意到它会造成不可见的垂直溢出，从而至少在Safari和Chrome中造成不必要的垂直滚动。我还担心这可能会导致无法测试的其他浏览器中的其他设备出现其他问题。

---

由于此错误，为了用户体验，网站有时有时看起来像废话，这实在太糟糕了。

外面有人知道发生了什么吗？

有人知道任何解决方法吗？

有人知道实际的解决方案吗？

Answer 1

您好，这个问题起初是让我理解的，回想起我过去花数小时在HTML和CSS上反复尝试以解决问题的方法。 miss，所有的苦难时刻都在这一刻。

vh过去是由浏览器的当前视口计算得出的。如果您在浏览器中加载了网站，则1vh等于屏幕高度的1％，然后减去浏览器界面。

但是！如果要滚动，它会很棘手。刷过浏览器界面（在本例中为地址栏）之后，您的内容将发生巨大的跳跃，因为vh将被更新。

用于iOS的Safari实际上是第一个实施此修复程序的公司。他们根据最大屏幕高度设置固定的vh值。这样用户就不会体验内容的跳跃，但是....是的，总会有一个...

具有固定值真棒，除非您想拥有完整尺寸的元素，或者在屏幕底部具有固定位置的元素，因为那样的话，它将被裁剪掉！

那是你的问题。...再见，因为...

这是您的解决方案！

css：

.my-element {
  height: 100vh; /* This is for browsers that don't support custom properties */
  height: calc(var(--vh, 1vh) * 100);
}

js：

// Get the viewport height and multiply it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then set the custom --vh value to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

现在，您可以像使用其他任何vh单位一样，将--vh用作您的身高值，将其乘以100，就可以得到我们想要的全高。

还有一件事，上面的js可以运行，但是当视口改变时，我们从不更新元素的大小，所以这还行不通，您需要一个侦听器...

更多js：

// We listen to the resize event
window.addEventListener('resize', () => {
  // Update the element's size
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

干杯！