CODEWITHSUNDEEP
javascripthtmlcss
Sara Ree
Sara Ree

Reputation: 3543

Intense GPU usage for animations playing over blurred background

Considering this paragraph from calibreapp.com:

Browsers make optimizations by creating separate layers for elements with CSS transitions or animations on Position, Scale, Rotation and Opacity. When you have an animated element on its own layer, moving it around doesn’t affect the positions of surrounding elements, the only thing that moves is that layer. This way the browser avoids repaints and does only compositing.

Now imagine we want to blur the whole background, the blur animation starts progresses and finally it finishes, ok?

Now on this blurred background we want to add a simple scale animation like this: (note that this is a separate div with no connection with background we already blurred)

.beaton {
  animation: beatonAnime .5s infinite alternate;
}

@keyframes beatonAnime {
  0%   { transform: scale(1); }
  100% { transform: scale(0.96); }
}

The confusing issue is:

Without that blurred background I get 1-2% GPU usage.

With that blurred background (which is not animating now and has finished seconds ago) I get 68% GPU usage!!!

As the paragraph said we should not see any difference between theses two as the blurred animation of background is not running when we add the scaling animation and they are in separate layers.

Here is the link to live example: (Note the GPU not CPU usage)

https://langfox.ir/test/beat/index.html

By the way this is the blur animation on the background:

.overlay {
  animation: overlayShow 0.25s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes overlayShow {
  from {
    backdrop-filter: blur(0);
    background-color: rgba(35, 33, 36, 0);
  }
  to {
    backdrop-filter: blur(80px);
    background-color: rgba(35, 33, 36, 0.7);
  }
}

Is there any solution for this?

NOTE: There is no such issue when I use filter: blur(80px) instead of backdrop-filter: blur(80px);. So what's wrong with backdrop-filter?

Upvotes: 5

Views: 1341

Answers (1)

Caffeine Cat
Caffeine Cat

Reputation: 79

i get the same problem when play an animation above a blurred overlay.My final solution is to get a static blur image,it's formate cant be .png and shoule be .jpg.Then i set the overlay css property as 'background-image:url('../xxx.jpg)'.Since the background of the overlay is static,it wont take a lot gpu resource.Its a silly solution.

Upvotes: 2

Related Questions