背景附件：在Firefox或Edge与Chrome中已修复 [英] background-attachment: fixed in Firefox or Edge versus Chrome
问题描述
body {高度：150vh;}＃hero {位置：相对；边界：无；高度：100vh；}＃hero .hero-image {background-image：url（https://images.unsplash.com/photo-1518791841217-8f162f1e1131）;背景附件：固定；背景位置：中心；背景重复：不重复；背景尺寸：封面；位置：绝对；最高：0;左：0；底部：0正确：0；高度：95％；}＃hero .hero-image：之后{内容：;位置：绝对；最高：0;左：0；底部：0正确：0；背景：rgba（0,0,0,0.2）;}＃hero .skewhero-mask {高度：100％；位置：绝对；最高：0;左：10vw；宽度：45vw;溢出：隐藏；转换：偏斜（24deg）translateX（0vh）translateY（0％）;}＃hero .skewhero-parallax {转换：translateX（0vh）;宽度：200％;位置：绝对；最高：0;左：0；底部：0右边：0;}＃hero .skewhero-image {背景图片：url（https://images.unsplash.com/photo-1518791841217-8f162f1e1131）;高度：100％;背景尺寸：110％自动；背景附件：固定； transform-origin：右上；转换：倾斜（-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 属性（本身及其所有父级）将图像固定到视口。有什么补救办法吗？
$（function（）{ use strict; var $ skp = $（'。skewhero-parallax'）; var $ skm = $（'。skewhero-mask'）; var $ hi = $（'。hero-image '）;函数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 {高度：150vh;}＃hero {位置：相对;边界：无； height：100vh;}＃hero .hero-container {height：95％; #hero .hero-container：after {content：;位置：绝对；背景：rgba（0,0,0,0.2）;高度：95％;最高：0;左：0；正确：0;}＃hero .hero-image {高度：100％；背景图片：url（https://images.unsplash.com/photo-1518791841217-8f162f1e1131）;背景重复：不重复；背景尺寸：封面； will-change：transform;}＃hero .skewhero-mask {高度：100％;位置：绝对；最高：0;左：10vh；宽度：45vw;溢出：隐藏；转换：偏斜（24deg）translateX（0vh）; will-change：transform;}＃hero .skewhero-parallax {width：200％;位置：绝对；最高：0;左：0；底部：0正确：0；转换：translateY（0px）;意志改变：transform;}＃hero .skewhero-image {background-image：url（https://images.unsplash.com/photo-1518791841217-8f162f1e1131）;背景重复：不重复；高度：100％;背景尺寸：110％自动；背景位置：0px -35px； transform-origin：右上；转换：倾斜（-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 导致严重的性能问题。这是因为浏览器在滚动时必须重新绘制整个图像。 来源＃1 和< a href = https://medium.com/@ArthurFinkler/css-animations-translate-vs-absolute-positioning-and-background-position-dd39fbdeade5 rel = nofollow noreferrer>来源＃2 。我已经对此进行了测试，可以确认滚动时的延迟很大。我已经开始使用 transform：translate（）属性，由于浏览器不必重新绘制整个图像，因此对此属性进行了很多优化。
当我想用jQuery动画视差效果时，我在代码中模仿了固定的背景效果。我添加了所需效果的代码段，该代码段可在Chrome，Firefox和Edge中使用。
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>
I am really stuck with this one. I'm designing a parallax effect where I shift the background-position property of a fixed background using jQuery. The jQuery isn't at fault here, so I won't include it here to reduce the complexity of the question.
In Chrome, I get the desired effect. In Firefox or Edge, it's a nightmare. I have not tested it on Opera as of yet. When removing the background-attachment: fixed from the class .skewhero-image in those browsers, I notice there's no difference whatsoever. The property doesn't do anything, because when I remove the same property in Chrome, I get the same undesirable result as in the other browsers.
How can I change my code as to achieve the exact same effect as I have now in Chrome, but in all other desktop browsers as well? Mobile browsers excluded.
Basically, the image of the cat must not move, only the container surrounding it. In Chrome, this works as intended. In Firefox or Edge, the cat moves with the container, it isn't fixed to the viewport.
Edit: I have found out that leaving out all transform properties, from itself and all parents, fixes the image to the viewport. Anything to remedy this?
$(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>
I have found an alternative solution to fix my problem. Also, it seems browsers are able to deal with this solution a lot better. background-attachment:fixed is causing serious performance issues. This is because the browsers have to repaint the entire image when scrolled. Source #1 and Source #2. I have tested this myself and can confirm there's heavy lag when scrolling. I have started using the transform: translate() property, which is a lot more optimized for this as browsers don't have to repaint the entire image.
As I want to animate my parallax effect with jQuery, I've mimicked the fixed background effect in my code. I have added a code snippet of the desired effect, which works in Chrome, Firefox and Edge.
这篇关于背景附件：在Firefox或Edge与Chrome中已修复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
