2

This is question has been asked before but with little fanfare/with little insight about how to fix it or any workarounds. Plus it has been 2 years since and I figure it's a good time to re-investigate:

Stack Overflow Question: How can I prevent background-attachment:fixed; from lagging my website?

Stack Overflow Question 2: My fixed background made scrolling the site very slow, what can I do to improve it?

Discussion here: https://code.google.com/p/chromium/issues/detail?id=90637

As you can see, I'm using background-attachment:fixed on 3 separate sections of this website:

http://agoodman.com.au/updated/

using Chrome's timeline console it seems that the entire page is being repainted with every scroll down the page. This can be quite laggy especially on older computers. I'm using a rMBP and it's quite laggy for me as well.

Question is: (a) are there any workarounds for this available, and (b) are there any javascript alternatives for background-attachment:fixed which give better performance?

Community
  • 1
  • 1
JVG
  • 20,198
  • 47
  • 132
  • 210
  • Fixed backgrounds have historically always been a pain performance-wise due to their very nature. (You'd think that hardware acceleration would turn it butter-smooth but then there are software optimizations to make as well...) – BoltClock Feb 19 '14 at 05:57
  • Today I found some `background-attachment:fixed` glitchiness on [**a website I've been working on**](https://chasemoskal.com/~scottsg/proto6/services) -- see on the services page, the last heading's fixed background -- when you hover over the social media buttons (bottom left), the fixed background flickers. *Among Chrome, Firefox, and IE, all on Windows 7* -- it only happens in Chrome. – ChaseMoskal Feb 19 '14 at 06:18
  • @BoltClock Interesting, as with the second part of the question do javascript implementations benefit here at all? Some sort of parallax-like effect perhaps - I always thought using JS for animations was way slower but this seems so poorly implemented by browsers that I feel it might be better. – JVG Feb 19 '14 at 07:05
  • It doesn't help that you have images that are scaled up and down from their natural resolution. Try putting in the images at the exact size you need them so the browser doesn't have to do all of that resizing work on each paint as you scroll. For example, I took `min-width: 100%;` off of cool-guy.jpg and took the scaling off the background images and got a little bit better performance. I'd imagine it'd be even better actually sizing the images correctly instead of just with devtools. – okcoker Feb 19 '14 at 07:24

1 Answers1

1

Yes, there's a good javascript alternative called scrollmagic that may help you.

I successfully changed my background-attachment:fixed to use the pin function. You can find a good example here.

Andrei Tognolo
  • 11
  • 1