Chromium浏览器中带translateZ的Hero元素偏移问题修复咨询

我用3D变换实现hero区域的视差滚动（滚动时hero移动更慢），代码在Firefox中显示正常，但Chrome和Edge里出现三个问题：hero向右偏移、页面出现水平滚动条、左侧有细白边。试过添加translateX修正偏移，但破坏了Firefox和移动端布局；移除wrapper的overflow-y能修复偏移，但页面无法滚动。

修正后的完整CSS代码 #

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.wrapper {
  max-height: 100vh;
  overflow-y: auto;
  perspective: 10px;
  transform-style: preserve-3d;
  width: 100vw;
  overflow-x: hidden;
}

.hero {
  min-height: 100vh;
  width: 100%;
  transform: translateZ(-20px) scale(3);
  position: relative;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transform-origin: center center;
}

.hero__text {
  background: linear-gradient(to top, #1b1b1b, #1b1b1baa 70%, #0000);
  backdrop-filter: blur(0.1rem);
  color: #ddd;
  margin: 0;
  padding: 2rem;
  z-index: 1;
}

.hero__image {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-section {
  padding: 2rem;
  background: #1b1b1b;
  color: #ddd;
}

核心修复逻辑 #

• 全局+容器水平裁剪：给body和.wrapper添加overflow-x: hidden，直接切掉hero缩放后超出视口的部分，解决水平滚动条问题
• 强制容器宽度匹配视口：给.wrapper设置width: 100vw，避免Chrome在perspective布局下的宽度计算偏差，消除左侧白边和偏移
• 统一变换原点：给.hero设置transform-origin: center center，让Chrome和Firefox的3D变换渲染逻辑对齐
• 文本层级加固：给.hero__text添加z-index: 1，确保文本始终在背景图上方，避免跨浏览器的层级渲染问题

HTML代码无需修改，保持原结构即可。

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