背景附件：在 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 上测试过它。在这些浏览器中从 class .skewhero-image 中删除 background-attachment: fixed 时，我注意到没有任何区别。属性没有任何作用，因为当我在 Chrome 中删除相同的属性时，我得到了与其他浏览器相同的不良结果。

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

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

编辑：我发现遗漏 all transform 属性，从自身和所有父项中，将图像修复到视口。有什么可以补救的吗？

Answer 1

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

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

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

Answer 2

$(function() {
 "use strict";
 var $skp = $('.skewhero-parallax');
 var $skm = $('.skewhero-mask');
 var $hi = $('.hero-image');

 function calcParallax() {
   var $scroll = $(document).scrollTop();
   $skm.css({'transform':'skew(24deg) translateX(-' + (0.445 * $scroll) + 'px)'});
   $skp.css({'transform':'translateY(' + $scroll + 'px)'});
   $hi.css({'transform':'translateY(' + $scroll + 'px)'});
 }

 $(window).on('scroll', function () {
  calcParallax();
 });

 $(window).resize(function() {
  calcParallax();
 });
});

body {
  height: 150vh;
}

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

#hero .hero-container {
 height: 95%;
 overflow: hidden;
}

#hero .hero-container:after {
 content: "";
 position: absolute;
 background: rgba(0,0,0,0.2);
 height: 95%;
 top: 0;
 left: 0;
 right: 0;
}

#hero .hero-image {
 height: 100%;
 background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
 background-repeat: no-repeat;
 background-size: cover;
 will-change: transform;
}

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

#hero .skewhero-parallax {
 width: 200%;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 transform: translateY(0px);
 will-change: transform;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero">
    <div class="hero-container">
        <div class="hero-image"></div>
    </div>
    <div class="skewhero-mask">
      <div class="skewhero-parallax">
        <div class="skewhero-image"></div>
      </div>
    </div>
</section>

我找到了解决我问题的替代解决方案。此外，浏览器似乎能够更好地处理这个解决方案。 background-attachment:fixed 导致了严重的性能问题。这是因为浏览器在滚动时必须重新绘制整个图像。 Source #1 and Source #2。我自己对此进行了测试，可以确认滚动时存在严重滞后。我已经开始使用 transform: translate() 属性，它为此优化了很多，因为浏览器不必重新绘制整个图像。

因为我想用 jQuery 制作视差效果动画，所以我在我的代码中模仿了固定背景效果。我添加了所需效果的代码片段，可在 Chrome、Firefox 和 Edge 中使用。

背景附件：在 Firefox 或 Edge 中修复，相对于 Chrome

background-attachment: fixed in Firefox or Edge versus Chrome

css

cross-browser

css-transforms

background-position

background-attachment