背景附件：在 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 中，猫随容器移动，而不是固定在视口上。

编辑：我发现从自身和所有父级中省略 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 和 Source #2。我自己对此进行了测试，可以确认滚动时存在严重滞后。我已经开始使用transform: translate() 属性，因为浏览器不必重新绘制整个图像，所以对此进行了更多优化。

因为我想用 jQuery 为我的视差效果设置动画，所以我在我的代码中模仿了固定的背景效果。我已经添加了所需效果的代码 sn-p，它适用于 Chrome、Firefox 和 Edge。