CSS：视差效应使包装在chrome中具有更大的尺寸_Css_Google Chrome_Parallax

CSS：视差效应使包装在chrome中具有更大的尺寸

css google-chrome

CSS：视差效应使包装在chrome中具有更大的尺寸,css,google-chrome,parallax,Css,Google Chrome,Parallax,我已经试了几个小时如何修复只在chrome上出现的bug 包装中有两层，分别为：视差背景正常内容滚动我一直在使用translateZ和scale规则来实现视差效果，在firefox上一切正常。。但是由于某种我不知道的原因，在chrome上，它使得父包装器采用了巨大的尺寸，以适应视差背景的比例许多帖子说，这个问题可以通过在包装器中添加translateZ（0）或z-index:0来解决，但它并没有解决我的问题。所以CSS上的视差代码如下所示： #parallax { perspec

我已经试了几个小时如何修复只在

chrome

上出现的bug

包装中有两层，分别为：

视差背景

正常内容滚动

我一直在使用

translateZ

和

scale

规则来实现视差效果，在firefox上一切正常。。但是由于某种我不知道的原因，在

chrome

上，它使得父包装器采用了巨大的尺寸，以适应视差背景的比例

许多帖子说，这个问题可以通过在包装器中添加

translateZ（0）

或

z-index:0

来解决，但它并没有解决我的问题。所以CSS上的视差代码如下所示：

#parallax {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}
.parallax__layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.parallax__layer--base {
    transform: translateZ(0);
}
#parallax__layer--back {
    transform: translateZ(-50px) scale(56);
    background: url("/assets/images/background.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    background-position: center;
    scroll-behavior: smooth;
}

应放置视差的HTML：

<body>
    <div id="parallax">
        <div id="parallax__layer--back" class="parallax__layer "></div>
        <div class="parallax__layer parallax__layer--base">
            <!-- Base Content -->
        </div>
    </div>
</body>

我从未找到解决此问题的方法，但在阅读本文之后：似乎有一个解决方案可以使用

透视原点：0

@EdmundReed我试过了，但这只会让图像变得太小，而这是一个大卷轴，一直在玩，但你正在改变它，因为我测试哈哈。所以你的问题是，当你到达底部时，卷轴不会停止，对吗？@Gezzasa很抱歉进行了更改，我现在正在网站上工作。。是的，尽管它不应该在页脚后滚动更多，但页脚后有一个巨大的空间不是问题。在你的网站上疯狂：）。我以前使用过parallax js库，它对我很有效。无法看到任何附加到页面的库。编辑：您的背景大小可能导致您出现问题。我看到调整大小时背景会被挤压。