隐藏的 Safari 可见性错误

Question

我想使用

visibility

和

translate

来控制向用户显示哪些内容。

因此，当用户通过导航进行选项卡时，下面的内容将通过

translateX()

进行转换以显示正确的信息。然后，使用

visibility: visible

向用户显示视口中的容器，并使用

visibility: hidden

隐藏视口外的容器。

两个容器的 CSS 看起来像这样：

.visible {
  position: absolute;
  width: 100vw;
  transform: translateX(0px);
  visibility: visible;
}

.hidden {
  position: absolute;
  width: 100vw;
  transform: translateX(-100vw);
  visibility: hidden;
}

这在 Chrome 和 Firefox 中按预期工作，但由于某些原因，在 Safari 中这些属性无法按预期执行，并且浏览器会水平滚动。 您可以通过使用此链接进行测试来亲自查看此行为（在折叠下方滚动并在选项卡之间切换以观察行为）。

我确实看到了这个 stackoverflow 问题，但在这种情况下，该解决方案似乎对我不起作用。我想保持网站的结构不变，并希望有一个解决方法可以解决这个 Safari 错误，感谢您的想法。

Answer 1

要修复此错误，您可以使用以下 CSS。 will-change 属性告诉浏览器该元素将来可能会发生变化，这有助于提高性能。:

.visible {
  position: absolute;
  width: 100vw;
  transform: translateX(0px);
  visibility: visible;
  will-change: transform, visibility;
}

.hidden {
  position: absolute;
  width: 100vw;
  transform: translateX(-100vw);
  visibility: hidden;
  will-change: transform, visibility;
}

另一种可能的解决方案是在两个元素的父容器上使用溢出：隐藏属性。这将阻止浏览器水平滚动。

.container {
  overflow: hidden;
}

.visible {
  position: absolute;
  width: 100vw;
  transform: translateX(0px);
  visibility: visible;
}

.hidden {
  position: absolute;
  width: 100vw;
  transform: translateX(-100vw);
  visibility: hidden;
}

尝试其中一种解决方案，看看它是否可以为您修复该错误。