Website lag on scroll

Question

I'am busy with my website, and now I have a issue.

When i scroll down to my contact page, my browser starts to lagg, because i have a background image with the property scroll, and size cover.

So i googled a bit and the result was that the property cover causes the laggs.

How can i fix this? I need my background size covered because i have my website responsive

My code:

background-attachment: scroll,  fixed;
background-color: #666;
background-image: url("../images/black.png"), url("../images/bg-footer.jpg");
background-position: center,    center center;
background-size: cover, cover;

Have you compressed your images at all? That would probably be the place to start. — James Donnelly, Oct 21 '14 at 11:00
Have you tried adding `transform: rotateX(0deg);` to force it into a separate layer and hand off its drawing to the GPU? — somethinghere, Oct 21 '14 at 11:10
If you use `transform:`, you force the drawing of your background to be done by your GPU instead of your CPU, which could speed up things. — Tom, Oct 21 '14 at 11:24
`-webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0);` correctly forces hardware-acceleration — josh_bailey4, Nov 11 '14 at 02:17
Where do i have to place it? In the div I use for the background? — Thijs Kempers, Nov 11 '14 at 10:14
@josh_bailey4 - you are a god. This kind of hardware acceleration is what I needed for a LONG time. Many thanks! Also, if not for Tom and somethinghere, I wouldn't have viewed more comments and seen your comment. Upvotes for all of you c: — Aistis, Aug 17 '15 at 14:13

score 1 · Answer 1 · answered Nov 17 '14 at 03:41

1

Can i ask why you need to use background-attachment: scroll at all?

You have set the background image to cover the full width of its container, which means it's not going to change position on scroll anyway.

You are forcing the browser to recalculate the image size whenever you scroll the mouse, causing the lag.

You could also try using other properties like contain or 100% width to fix your image.

answered Nov 17 '14 at 03:41

Ucinorn

648
7
21

The images resizes to the full size of the width. Then it has to scroll with. Found my inspiration at: http://html5up.net/alpha – Thijs Kempers Nov 17 '14 at 09:57
yep, like i said above, this is becasue the browser is dynamically calculating the full screen size and applying it to the image whenever you change the screen position. This means scrolling down makes the browser perform this complex calculation many times a second. The answer is not not use background cover with background scroll. These answers should help too: http://stackoverflow.com/questions/7869086/poor-performance-of-chrome-using-background-size-cover http://stackoverflow.com/questions/7033979/my-fixed-background-made-scrolling-the-site-very-slow-what-can-i-do-to-improve – Ucinorn Nov 18 '14 at 00:24

Website lag on scroll

1 Answers1