CODEWITHSUNDEEP
javascripthtmlcss
Mona
Mona

Reputation: 376

CSS, "-webkit-animation" consumes too much CPU on Google Chrome

I use the following CSS:

.navbar .agesbar {
        height: 55px;
        background-image: url('/img/nicebar.jpg');
        background-repeat: repeat-y;
        background-position: center center;
        background-size: cover;

        width: 100%;
        -webkit-animation: agesTicker 120s linear infinite;
        animation: agesTicker 120s linear infinite;
    }

    @-webkit-keyframes agesTicker {
        from {background-position: 0 0;}
        to {background-position: -2446px 0;}
    }       
    @keyframes agesTicker {
        from {background-position: 0 0;}
        to {background-position: -2446px 0;}
    }

Everything works fine, unfortunately, it consumes too much CPU on Google Chrome. (10-20%). On Firefox, and even Internet Explorer it doesn't waste that much CPU (only 2-3%). I fixed the high CPU usage by adding:

will-change: transform;

to force gpu acceleration, unfortunately it doesn't fix the performance, because now the GPU is "working heavier": The laptop is getting warmer and the fan in my laptop is getting a bit louder.

I've got two questions: 1. Why this animation works so bad on Chrome, while it's fine on the other browsers? 2. Is there any replacement to this animation, for example a jquery script?

Upvotes: 3

Views: 690

Answers (3)

Lenar Fattahov
Lenar Fattahov

Reputation: 141

I guess background-position animation is slow. Maybe animation with translatewill be faster?

Upvotes: 0

pwolaq
pwolaq

Reputation: 6381

my guess it the problem is due to background-size: cover, as far as I remember resized image is not cached so browser has to recalculate it everytime

try to remove it and see it anything changes

Upvotes: 0

Justinas
Justinas

Reputation: 43441

You can try to use CSS transition and than just change background position using js/jQuery:

$(document).ready(function() {
  $('.test').css({'background-position': '0px -200px'});
});
.test {
  background: url('http://lorempixel.com/400/200/sports/') no-repeat 0 0;
  width: 100px;
  height: 100px;
  transition: background-position 2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>

Upvotes: 1

Related Questions