溢出-x 不适用于 chrome 移动设备

Question

我正在尝试制作一个 CSS 视差网站。在桌面上一切正常，但在移动设备上，我得到一个由 transform3d 比例引起的水平滚动条（在视差类上也有溢出-x：隐藏）。如果我更改为溢出：隐藏它可以工作，但我不能再滚动内容了。

$parallax-perspective : 1 !default;

.parallax{
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  @include perspective($parallax-perspective*1px);
  @include transform-style(preserve-3d);
}

.parallax__group {
  position: relative;
  height: 100vh;
  @include transform-style(preserve-3d);
}

@mixin parallax__layer(
$distance    : 0,
$perspective : $parallax-perspective
) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  @include transform3d(
      translate3d(0,0,$distance * $perspective * 1px)
      scale(abs($distance - 1), abs($distance - 1)));
  z-index: $distance * 1000;
}

.parallax__layer--base {
  @include parallax__layer(0);
}
.parallax__layer--back {
  @include parallax__layer(-1);
}


<div class="parallax">
  <div class="parallax__group">
    <div class="parallax__layer--base"></div>
    <div class="parallax__layer--back"></div>
  </div>
</div>

Answer 1

它正在使用包装类

.parallax__inner{
  overflow-x:hidden;
}