Background Attachment Fixed—Google Chrome

Question

Currently on Firefox and Safari the background-attachment: fixed property is working, but is not responding on Chrome.

Here is the page that works in FF & Safari http://prestonmcpeak.com/work/enigma.html

This is the desired effect I'm looking for that is working in all three browsers: http://codyhouse.co/demo/alternate-fixed-scroll-background/index.html

I have a feeling this has to do with a position tag somewhere on the page.

      <section class="project-header ">
        <div class="project-background show-for-large-up"></div>
        <section class="enigma"></section>
      </section>

        .project-header {
            section {
               position: fixed;
               height: 100%;
               width: 100%;
               top: 0;
               left: 0;
               z-index: -1;
               &.enigma {
                  background-size: contain;
                  background-attachment: fixed;
               }
            }
        .project-background {
            padding: 20% 0;
            margin: 0;
        }
        .enigma {
            background: url(../assets/img/enigma-1-m.jpg) no-repeat center top;
        }

Answer 1

Ok, I think I know what the problem is. Someone on the CSS-Tricks forum had the same issue.

The problem is using -webkit-transform on one of the parent elements from the div you're applying the fixed background on.

To solve the problem you will have to remove the -webkit-transform from the section with the class name of "main-section".

So this:

.main-section {
 -webkit-transform: translate3d(0,-45px,0);
  margin-bottom: -45px;
}

Should look like this:

.main-section {
  margin-bottom: -45px;
}

I managed to replicate and fix the problem on the Enigma url you provided. Please let me know if this fixes the problem for you.