Question

我已经尝试了几个小时如何修复仅在translateZ上发生的错误。

包装器中有2层，它们是：

视差背景
正常内容滚动

我使用scale和chrome规则一直在做视差效果，所有内容在firefox上运行正常..但由于某些原因我不知道，在{{ 1}}它使父包装器采用巨大的尺寸来适应视差背景的比例。

很多帖子都说可以通过向包装器添加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>

CSS：视差效果使包装器在镀铬中占据更大的尺寸

0 个答案: