New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed background not fixed in Chrome #208

Closed
Madebym opened this Issue Jan 31, 2014 · 18 comments

Comments

Projects
None yet
6 participants
@Madebym

Madebym commented Jan 31, 2014

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

This comment has been minimized.

Owner

alvarotrigo commented Jan 31, 2014

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.

@Madebym

This comment has been minimized.

Madebym commented Jan 31, 2014

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

This comment has been minimized.

Owner

alvarotrigo commented Jan 31, 2014

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

@Madebym

This comment has been minimized.

Madebym commented Jan 31, 2014

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

This comment has been minimized.

Owner

alvarotrigo commented Jan 31, 2014

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

@Madebym

This comment has been minimized.

Madebym commented Jan 31, 2014

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

This comment has been minimized.

Owner

alvarotrigo commented Jan 31, 2014

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

@Madebym

This comment has been minimized.

Madebym commented Jan 31, 2014

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

This comment has been minimized.

Owner

alvarotrigo commented Jan 31, 2014

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.

@Madebym

This comment has been minimized.

Madebym commented Jan 31, 2014

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

This comment has been minimized.

Owner

alvarotrigo commented Feb 1, 2014

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

This comment has been minimized.

gasbb commented May 13, 2015

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

@Rayken

This comment has been minimized.

Rayken commented Sep 15, 2015

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

This comment has been minimized.

Owner

alvarotrigo commented Sep 15, 2015

@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

This comment has been minimized.

Owner

alvarotrigo commented Sep 15, 2015

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

@Rayken

This comment has been minimized.

Rayken commented Sep 15, 2015

@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

This comment has been minimized.

rietzschel commented Feb 28, 2016

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

This comment has been minimized.

imjared commented Nov 14, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment