Fixed background not fixed in Chrome

[fluxxus]

I have four sections, and they use background-attachment:fixed. It works in all browsers, except Chrome. In Chrome the backgrounds move, but I want them fixed.

Here is the link: http://www.madebym.me/test/PoligateV2/

Is there any workaround for this?

[alvarotrigo]

You are using css3:true and that's adding a translate3d css3 property to the body of the page. You should research a bit on the internet to find a solution for it, for example: http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue

This is not a bug in fullpage.js but a problem with chrome and the property fixed when using css3 translate3d.

[fluxxus]

Thanks Alvaro, but css3 was previously set to false. I just changed it a few minutes ago to see will it make a difference. It didn't work with jQuery either. I'll take a look at the link you provided.

[alvarotrigo]

It still set to css3:true. If you change it to css3:false le tme know.

[fluxxus]

It is set to false now. Also, when I changed to css3, the second and third backgrounds were not visible on Safari and Firefox on Mac.

[alvarotrigo]

Try it adding to the element the property background-attachment: fixed;

[fluxxus]

Yes, all elements have background-attachment: fixed; applied. It works in all browsers, except Chrome!

Not sure what was causing the background to dissapear when using css3 mode. Only the first one was visible, and the second and third-gone. On Safari and Firefox on Mac.

[alvarotrigo]

Well, as I said, better if you ask in some other place such as http://stackoverflow.com/ . They will help you better than I. This is not a issue directly related with fullpage.js

[fluxxus]

Ok, I can live with no fixed background on Chrome. No problem about that. But I think that the second issue is fullpage.js related. When setting css3 mode on, the second and third background are not visible on Safari and Firefox on Mac.

If I use css3 mode off, then the animations are very choppy on Safari for Mac. I enabled css3 now, so maybe you can have a look.

Update: setting css3 to on, the backgrounds are not visible on Firefox in Windows, too.

[alvarotrigo]

But still not being a problem with fullpage.js It might be a problem related with the property translate3d which is part of fullpage.js but for which we dont have control over it.

[fluxxus]

Thanks Alvaro for your responses. I really don't want to bother you, but I am just curious. If something works in normal mode, and then when I switch to css3 mode, it is not working.

I am talking about latest browsers, Safari and Firefox, all on latest updated versions. The animations are much smoother in css3 mode, but when I turn it on, it breaks the layout.

[alvarotrigo]

As I said before, it is because the css3 option when enabled it makes use of the css3 property called translate3d which seems to have weird behaviors with fixed positioned elements.

Is not about the plugin, is about the css3 property and the browsers.

[gasbb]

i have same issue... when i put inside the fullpage fixed attachment bg div it doesnt working in chrome

[Rayken]

How about allowing for translate rather than translate3d on said element? It's rather annoying having to use jquery animations instead of CSS just because I want one background attachment fixed. So is there a fix you can make instead? E.g. adding options so css3: true, css3d: false; or even css3d_sections: ['#section-1', '#section-2'] etc..

Thanks.

[alvarotrigo]

@Quaked translate3d is usually faster as it makes use of hardware acceleration.

I would say that, this being a Chrome bug, it doesn't make much sense to try to provide a solution in fullpage.js when the problem is in the browser itself.

Why don't you juse use css3:false instead? Probably the difference in performance won't be much with jQuery.

You can even use scrollBar:true and that will fix the problem.

[alvarotrigo]

To push a bit more Chrome guys just star the issue on the top left.

[Rayken]

@alvarotrigo css3: false drastically decreases performance (mobile and desktop) and having to use it because one wants a single section background attachment as fixed is just sad. Sure it's a Chrome bug. And it's been there for quite some time without indication it'll get fixed any time soon. Meanwhile it's one of the most used browsers. I'd still prefer to have the control; I'd pick translate over jquery.animate() any day. Also that'd enable me to trigger GPU acceleration for specific sections as I see fit, either by calling translateZ(0) or translate3d() both of which should work.

Using jQuery as the fallback if "all else fails" is a good enough fallback and it should remain as such.

More options for zeh ppl! :)

edit: the difference is 10fps vs. 60fps at the moment

[rietzschel]

I made a workaround for this issue. Not using css3:false because of the decrease in performance. Beside that it was difficult to match the easing of css3 with the easing of jQuery.

What i did: A div before all divs:

$nbsp;

Css: .divclass { height: 100%;width: 100%;position: fixed;top: 0;left: 0;background-size: cover;z-index: -10;visibility: hidden;background-image: url(images/bgimage.jpg); } .divclass.view {visibility: visible;}

Then in the fullpage script (where the value of nextindex is the section offcourse, here 3): onLeave: function(index, nextIndex, direction) { var $divclass = $('.divclass');
if (nextIndex == 3 && direction === 'up') { $divclass.addClass('view' ); } else if (nextIndex == 3 && direction === 'down') { $divclass.addClass('view' ); } }, afterLoad: function(anchorLink, index) { var $media = $('.bg-media'); if (index != 3) { $media.removeClass('view'); } },

That's it. Using fullpage callback and leaving the css3 as it is :-). Works for me.

[imjared]

Note for anyone coming here in the future that this issue is resolved upstream in Chrome