html - Safari 视口(viewport)错误，固定位置和底部或顶部的问题

Question

我在 iOS 12.3.1 Safari 中遇到了一些奇怪的事情。 这个问题至少可以追溯到 iOS 12.2，但我想这个问题的存在时间要长得多。

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

为了重现问题，元素必须有 fixed 或 absolute 的 position，但是您是否使用 top 和 transform 或 bottom 定位元素。

人像模式

问题仅在纵向模式下出现，如果 Safari 正在显示其压缩的 URL 栏，它取代了正常的 URL 和菜单栏，并且没有垂直溢出。

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

值得注意的是，仅当存在垂直溢出且浏览器向下滚动或浏览器的方向从纵向更改为横向然后再返回时(无论是否存在垂直溢出)，才会显示压缩菜单栏).

通过垂直溢出改变方向//没有溢出

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

横向模式

横向模式的问题总是且仅当正常导航栏显示在页面顶部时才会出现。由于向下滚动或方向从纵向变为横向，导航栏只会在横向模式下隐藏。

垂直溢出

没有垂直溢出

有趣的是，横向模式下导航栏的高度明显偏移了视口(viewport)，因此 bottom: 0 或 top: 100% 的位置被推到了显示导航栏时的视口(viewport)。

人像模式糟糕的“解决方法”

这是一个 super hack-ish 的解决方法，也是一个糟糕的解决方法，但这是迄今为止唯一导致 position: fixed; 的方法。 bottom: 0; 如果没有溢出，在切换方向后将元素实际定位在视口(viewport)底部。

<div style='height: 0'>
  <!-- the quantity of <br> elements must create vertical overflow -->
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <!-- this does not work without the space character -->
  &nbsp;
</div>

但是，我只是注意到它会产生不可见的垂直溢出，因此至少在 Safari 和 Chrome 中会产生不必要的垂直滚动。我还担心它可能会在我无法测试的其他浏览器中的其他设备上引起其他问题。

---

由于这个错误，为了用户体验，网站有时不得不看起来像垃圾，这真是太糟糕了。

有人知道发生了什么事吗？

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

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

Answer 1

你好，这个问题一开始让我很困惑，我回想起我花了几个小时在 HTML 和 CSS 中徘徊，试图把事情做好的日子。唉，所有那些痛苦的时光都是为了这一刻。

vh 过去是根据浏览器的当前视口(viewport)计算的。如果您在浏览器中加载网站，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 会运行，但是当视口(viewport)改变时我们永远不会更新元素的大小，所以这还行不通，你需要一个监听器......

更多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`);
});

干杯!