background-attachment: fixed in Firefox or Edge versus Chrome - css

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>
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?

Answer 1

I am not sure what version of Firefox you are using but I just created codepen and it is working fine
<https://codepen.io/anon/pen/ZgpgZP>
If you are still have problem, please describe in details

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>
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.