css - 背景附件:在 Firefox 或 Edge 与 Chrome 中修复

Question

body {
    height: 150vh;
}

#hero {
    position: relative;
    border: none;
    height: 100vh;
}

#hero .hero-image {
    background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 95%;
}

#hero .hero-image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.2);
}

#hero .skewhero-mask {
    height: 100%;
    position: absolute;
    top: 0;
    left: 10vw;
    width: 45vw;
    overflow: hidden;
    transform: skew(24deg) translateX(0vh) translateY(0%);
}

#hero .skewhero-parallax {
    transform: translateX(0vh);
    width: 200%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#hero .skewhero-image {
    background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
    height: 100%;
    background-size: 110% auto;
    background-attachment: fixed;
    transform-origin: right top;
    transform: skew(-24deg);
}

<section id="hero">
    <div class="hero-image">
    </div>
    <div class="skewhero-mask">
      <div class="skewhero-parallax">
        <div class="skewhero-image"></div>
      </div>
    </div>
</section>

我真的被这个困住了。我正在设计一种视差效果，我使用 jQuery 移动固定背景的 background-position 属性。 jQuery 在这里没有错，所以我不会在这里包括它以降低问题的复杂性。

在 Chrome 中，我得到了想要的效果。在 Firefox 或 Edge 中，这是一场噩梦。到目前为止，我还没有在 Opera 上测试过它。在这些浏览器中从类 .skewhero-image 中删除 background-attachment: fixed 时，我注意到没有任何区别。该属性不会执行任何操作，因为当我在 Chrome 中删除相同的属性时，我会得到与其他浏览器中相同的不良结果。

如何更改我的代码以实现与我现在在 Chrome 中完全相同的效果，但在所有其他桌面浏览器中也是如此？移动浏览器除外。

基本上，猫的图像必须不能移动，只有围绕它的容器。在 Chrome 中，这按预期工作。在 Firefox 或 Edge 中，猫会随着容器移动，而不是固定在视口(viewport)上。

编辑:我发现遗漏所有 transform 属性，从自身和所有父级，将图像修复到视口(viewport)。有什么办法解决这个问题吗？

Answer 1

我不确定您使用的是哪个版本的 Firefox，但我刚刚创建了 codepen，它工作正常

<https://codepen.io/anon/pen/ZgpgZP>

如果还有问题，请详细描述