应用了 translateZ 的英雄元素在 Chromium 浏览器上向右倾斜，但在 Firefox 上不会。我该如何解决？

Question

所以，我想通过让英雄部分滚动得更慢来制作视差滚动效果。所以我将

perspective

和

transform-style

应用到包装纸上，也将

translateZ

和

scale

应用到英雄上，如下面的代码片段所示。

我一直在 Firefox 上测试它，它工作正常，但在 Chrome 和 Edge 上我发现hero 看起来向右倾斜了非常小的量。 那么我该怎么做才能解决这个问题？

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

.hero {
  min-height: 100vh;

  transform: translateZ(-20px) scale(3);
  position: relative;
  z-index: -1;

  display: flex;
  justify-content: center;
  align-items: flex-end;
}

这是标记（我使用 Pug）：

main.wrapper
  section.hero 
    .hero__text 
      h1 SMK Metland
      p  Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, maiores magni distinctio porro placeat facere ut ullam optio neque. Deleniti ipsam dolores quis, ducimus sapiente veniam esse error repellat perspiciatis.
      button#daftar Informasi pendaftaran
    .hero__image 
      img(src="./assets/hero-image.jpeg")

我最初尝试添加一个

translateX

来将英雄移动到左边，但这会弄乱 Firefox 和移动浏览器上的布局。似乎这个问题只存在于桌面 Chromium 浏览器上。

另外，我试着从包装纸上取下

overflow-y

，它似乎解决了倾斜的问题。但它使整个东西不可滚动，所以不是一个非常有用的修复。

请帮助我，谢谢！