1

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?

Armadillo
  • 457
  • 1
  • 9
  • 17

2 Answers2

0

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

user11697012
  • 1
  • 1
  • Firefox Quantum 68.0.1 (64-bits) and Microsoft Edge 42.17134.1.0. It doesn't work on my end. The cat in `skewhero-image` still isn't fixed to the viewport, but scrolls along. – Armadillo Jul 26 '19 at 15:36
  • I am using the same version, did you check the codepen link, is it working right on there – user11697012 Jul 26 '19 at 15:38
  • This is on Firefox, notice how the eyes are still visible when scrolling: https://prnt.sc/okgeiq This is on Chrome, notice how the eyes are gone when scrolling: https://prnt.sc/okgepk – Armadillo Jul 26 '19 at 15:41
0

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

Armadillo
  • 457
  • 1
  • 9
  • 17