title: Pure CSS-Parallax: Inconsistent Scrolling between Firefox and Chrome
body: <p>I have been playing around with creating a <strong>pure CSS-based parallax scrolling effect</strong> (background scrolls slower than foreground with perspective, transformZ and scale).</p>
  
  <p>I was pretty happy with the result (working in Firefox) until I tested it in Chrome.</p>
  
  <p>In Firefox, I see exactly the desired behavior: The screen shows a background that is bigger than the viewport. Upon scroll, the background moves slowly and a text moves quickly into the view. <strong>The scrolling ends when the bottom of the background layer aligns with the bottom of the viewport. However in Chrome (desktop and mobile), I can scroll a lot further down, misaligning the upper layers and scrolling the background up, revealing a blank white page behind.</strong></p>
  
  <p>Unfortunately, I do not understand which element is so large that it allows further scrolling. I just want the scrolling to end once the end of the background is reached. It does seem as if no other layer extends further than the background.</p>
  
  <p>I set up a <em>Minimal Problem Example</em> on <a href="https://codepen.io/sgasse/pen/jOOqpEE" rel="nofollow noreferrer">CodePen</a>. It shows the desired (Firefox-like) behavior there, but you might want to look at it by copying the two files and testing in Chrome.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang='en'&gt;
      &lt;head&gt;
          &lt;meta charset='utf-8'&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;Minimal Problem Example&lt;/title&gt;
          &lt;link rel='stylesheet' type='text/css' href='parallax.css'&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class='parallaxisWrapper'&gt;
              &lt;div class='parallaxisGroup'&gt;
                  &lt;div class='layer personalInfo-layer'&gt;
                      This text should scroll up into the viewable area
                  &lt;/div&gt;
  
                  &lt;div class='layer backimage-layer'&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>/*
     CSS Reset
     http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     License: none (public domain)
  */
  
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
  }
  
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
      display: block;
  }
  body {
      line-height: 1;
  }
  ol, ul {
      list-style: none;
  }
  blockquote, q {
      quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
      content: '';
      content: none;
  }
  table {
      border-collapse: collapse;
      border-spacing: 0;
  }
  
  
  
  /*
  My example starts here
  */
  
  .parallaxisWrapper {
      /* fill screen vertically */
      height: 100vh;
      /* allow only vertical scrolling */
      overflow-x: hidden;
      overflow-y: auto;
      /* shift the perspective to allow for parallax scrolling effect
          (perspective - distance) / perspective = scaleFactor
          distance is defined from zero layer, closer objects have to be scaled down and smaller have to be scaled up
      */
      perspective: 4px;
  }
  
  .parallaxisGroup {
      position: relative;
      height: 100vh;
      transform-style: preserve-3d;
  }
  
  [class$='-layer'] {
      /* position all parallax layers absolutely */
      position: absolute;
  }
  
  
  .personalInfo-layer {
      /* keep in the default distance to scroll normally */
      transform: translateZ(0) scale(1);
      width: 80vw;
      height: 55vh;
      left: 10vw;
      top: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 10vh;
  }
  
  .backimage-layer {
      /* transform to the back to scroll slower and adjust scale */
      transform: translateZ(-20px) scale(6);
      background: url(http://placekitten.com/1000/1000) no-repeat center fixed;
      background-size: cover;
      background-attachment: scroll;
      width: 100vw;
      /* adjust background layer width and top anchor to cover the full scrollable background of the upper layers */
      height: 116vh;
  }
  </code></pre>
  
  <p>Please do not be confused by the CSS-Reset Code in the beginning. It is just a copied standard. Also, some layers might seem superfluous to you. However this is a <em>tuned down</em> version of my actual page.</p>
  
  <p>Any hint on what could cause this behavior or how to make the impression consistent from Firefox to Chrome would be greatly appreciated!</p>