0

I've been trying for hours how to fix a bug that is happening only on chrome.

There are 2 layers in a wrapper, which are:

  1. Parallax background
  2. Normal content scrolled

i've been doing parallax effect by using translateZ and scale rules, everything works fine on firefox.. but for some reason which i don't know, on chrome it makes the parent wrapper to take a huge size to fit with the scale from the parallax background.

many posts say that this issue can be fixed by adding translateZ(0) or z-index: 0 to the wrapper but yet it doesn't fix my issue. So the code on CSS for parallax looks like this:

#parallax {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}
.parallax__layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.parallax__layer--base {
    transform: translateZ(0);
}
#parallax__layer--back {
    transform: translateZ(-50px) scale(56);
    background: url("/assets/images/background.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    background-position: center;
    scroll-behavior: smooth;
}

HTML where parallax should be positioned:

<body>
    <div id="parallax">
        <div id="parallax__layer--back" class="parallax__layer "></div>
        <div class="parallax__layer parallax__layer--base">
            <!-- Base Content -->
        </div>
    </div>
</body>
Oscar Reyes
  • 4,223
  • 8
  • 41
  • 75
  • I never could find a fix for this problem, but after reading this article here: https://developers.google.com/web/updates/2016/12/performant-parallaxing it looks like there might be a solution using `perspective-origin: 0 0;` – ESR Apr 24 '17 at 05:03
  • @EdmundReed i tried that, but it only makes the image get too small and yet the is a big scroll – Oscar Reyes Apr 24 '17 at 05:17
  • Been playing around but you're changing it as I test haha. So your problem is the scroll isnt stopping when you've reached the bottom, right? – Gezzasa Apr 24 '17 at 05:47
  • @Gezzasa sorry for making changes, i'm working on the site right now.. and yes, even though it should not scroll more after footer, there is a huge space after the footer – Oscar Reyes Apr 24 '17 at 05:48
  • Not a problem. Go crazy on your site :). I've used the parallax js library http://pixelcog.github.io/parallax.js/ before and it worked well for me. Couldn't see any libraries attached to your page. EDIT: Your background size might be causing you issues. I saw when resizing that the background becomes squashed. – Gezzasa Apr 24 '17 at 05:54
  • @Gezzasa the background was exactly what was messing the whole page, it behaves different in chrome than firefox, and i know there are parallax js libraries on the web, but i like working on pages using as less libraries as possible (vanilla is my best option), besides i think doing this kind of animation effect costs a little performance than doing it on CSS – Oscar Reyes Apr 24 '17 at 06:03

0 Answers0