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;
        }

I have the feeling you should give us what your current code is and what you did try... For now I can just tell you you should try setting the `position` propery of the element as `static`. — Mr.Web, Apr 04 '15 at 23:40
What is your question? Explain difference between working and non working — vitdes, Apr 04 '15 at 23:41
@vitdes on firefox the background remains fixed as it scrolls, on chrome the image moves with the page. — Preston McPeak, Apr 05 '15 at 00:50
@Mr.Web i've added some code if this helps give you any context, I'm coding in SCSS too — Preston McPeak, Apr 05 '15 at 00:58

igorM · Accepted Answer · 2015-04-05T01:40:16.280

2

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.

edited Apr 05 '15 at 01:40

answered Apr 05 '15 at 01:20

igorM

156
1
2
6

Splendid! You found the missing link. I'm loading foundation and that was a default style from their CSS, thanks for catching that! – Preston McPeak Apr 05 '15 at 02:19
Annoyingly this still appears to be the case. In my case, I actually had to remove all `transform: translate3d(...)` styles, even the ones that weren't parent elements of the one with the fixed background image. – zelanix May 11 '15 at 14:58

score 0 · Answer 2 · answered Jul 30 '15 at 13:20

There is an easier way through Javascript. Since this is an issue specifically in browsers that use the Webkit layout engine (Chrome, Safari, Yandex, etc.), you can create a condition to change the background-attachment property in these browsers:

if($.browser.webkit)
  $(".project-header section.enigma").css('background-attachment', 'scroll');

This is for jQuery, but if you prefer pure Javascript the condition would be:

if(~navigator.userAgent.toLowerCase().indexOf("webkit"))

This solved the problem for my (slick) slider, that uses transform: translate3d(...) in the parent element of all the slides. Since I also wanted it to change backgrounds with the background-size: cover property in each slide, this was the most effective solution.

Background Attachment Fixed—Google Chrome

2 Answers2