4

This code is using more than 40% of my CPU on Chrome.

body { -webkit-animation: swapwall 20s infinite; -webkit-animation-timing-function:linear; } @-webkit-keyframes swapwall { 0%{background-image:url(img1.png);} 20%{background-image:url(img2.png);} 25%{background-image:url(img3.png);} 45%{background-image:url(img4.png);} 50%{background-image:url(img5.png);} 70%{background-image:url(img6.png);} 75%{background-image:url(img7.png);} 95%{background-image:url(img8.png);} 100%{background-image:url(img9.png);} }

I don't understand why. Is there something wrong with the code? I tried adding hardware acceleration to the code but nothing changed. Is there anything I can do? Or some other way, that uses less CPU, that I can do to change background images with my css?

It seems I can just make a GIF to bypass this and use that as the background, but my images are 1920x1080 and all GIF makers are less than 500x500. I found one that created 1500x844, but it has no transition options.

Edit: I managed to create a 15 sec GIF from a video with the images, but it still consumes a huge amount of CPU and at a much lower quality.

Edit2: Possibly a Chrome issue? 

 body{background-color:#111111;} #inlineContent { pointer-events: none; display: block !important; } #inlineContent:before { position: fixed; left: 0; top: 0; content: ''; width: 100%; height: 100%; background-image: url(http://i.imgur.com/nncl4M8.png), url(http://i.imgur.com/yc91VzR.png), url(http://i.imgur.com/LjTST41.png); animation: Falling 20s linear infinite; -moz-animation: Falling 20s linear infinite; -webkit-animation: Falling 20s linear infinite; z-index: 102; } @keyframes Falling { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } @-moz-keyframes Falling { 0% {background-position: 0 0, 0 0, 0 0; } 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-webkit-keyframes Falling { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } .Falling { animation-name: Falling; -moz-animation-name: Falling; -webkit-animation-name: Falling; }

http://scratchpad.io/impolite-harmony-1298

Tested on Chrome and Edge. Chrome: About 12% CPU usage, Edge: About 2% CPU usage.

Improve this question
2
  • I should have said - for my purposes, I can't use any JS or HTML, only CSS. Commented Oct 24, 2015 at 7:16
  • Okay, that's good to know. Looks like it's pretty much all spent on repainting composite layers when I checked. And it doesn't even seem to matter much how large the element is actually displayed. Commented Oct 24, 2015 at 7:35

1 Answer 1

Reset to default
3

It sounds as though you are just overloading it. 9 images at 1920x1080 is usually a pretty hefty weight. What is the total file size for those images? Have you compressed them? Do you have a link to a demo of your code so that I can look more closely at everything?

EDIT:

After some digging around I came across this answer: https://stackoverflow.com/a/13293044/3909886 The suggestion is to add transform: translateZ(0); to your class, which should then allow the browser you use the GPU acceleration.

EDIT2:

I believe that the issue is down to the pixel width of the images. When using the following code:

 background-size: cover; -webkit-animation: swapwall 5s infinite; -webkit-animation-timing-function:linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: translateZ(0); margin: auto; width: 500px; height: 500px;

My cpu usage is down to 30%. I an only assume that the browser is struggling with the actual size of the images (number of pixels) that need updating on each swap.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

They are about 100-200 KB JPG. I tried 900 KB PNG too, but there is no difference in CPU usage. Actually, I just tried it now with only 3 images, but the CPU usage is exactly the same. Same with 2 images.
I've had a bit of a search and it seems that this usage is expected due to the infinite loop you have set. Try adding this property transform: translateZ(0); This info is from this answer here: stackoverflow.com/a/13293044/3909886
Do you have a link to a live version of the code so I can look at it myself?
Sure, I took out other parts of the code which reduced CPU usage significantly, but it's still incredibly high for a single webpage. scratchpad.io/vivacious-rule-1953
I've just played for the past 15 minutes with this and can't seem to get it any lower than it starts off at. All I can put it down is the pixel size of the images on the page. When using this code I've appended to the answer, I get usage down to 30%.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.