使用visibility与translate实现内容切换时的Safari浏览器Bug问题

我通过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浏览器中会触发水平滚动，滚动到页面下方后切换标签时问题尤为明显。此前我查询过相关Stack Overflow问题，但其中的解决方案对当前场景无效，希望在保留现有站点结构的前提下，找到解决这个Safari Bug的可行办法。

实用解决办法 #

• 给父容器添加overflow-x: hidden
  为绝对定位容器的直接父元素设置overflow-x: hidden，同时确保父元素宽度为100vw或100%，让Safari不再计算视口外元素的宽度来生成滚动条。示例代码：

  .tab-content-wrapper {
    position: relative;
    width: 100vw;
    overflow-x: hidden;
  }
  

• 用clip-path强制裁剪视口外元素
  给.hidden容器额外添加clip-path属性，强制裁剪掉超出视口的部分，避免Safari识别到范围外的元素。示例代码：

  .hidden {
    position: absolute;
    width: 100vw;
    transform: translateX(-100vw);
    visibility: hidden;
    clip-path: inset(0 0 0 100%);
  }
  

• 临时替换为fixed定位（兼容性需验证）
  如果上述方法无效，可以尝试将.hidden容器的position改为fixed，让元素脱离文档流，这样Safari不会将其纳入页面滚动范围的计算中。但需要注意该改动可能对整体布局产生影响，需结合实际场景验证。示例代码：

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

内容的提问来源于stack exchange，提问作者Nick