1846333 - Animated clouds on http://www.wdrmaus.de use around 60% CPU and GPU load

Status: NEW

(Core :: Performance, defect)

Description

[Henrik Skupin [:whimboo][⌚️UTC+2]]

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/117.0 ID:20230730210800

​​Compared to both Safari and Chrome which use under 10% of CPU and GPU load when the page https://www.wdrmaus.de/aktuelle-sendung/index.php5 is loaded with moving clouds animations enabled (default), Firefox consumes for each CPU and GPU around 60%.

Steps to Reproduce:

1. Load https://www.wdrmaus.de/aktuelle-sendung/index.php5
2. Observe the CPU and GPU load

Here a recorded Firefox profile with the animations first disabled, then enabled and finally disabled again: https://share.firefox.dev/4550eLd

OS version: MacOS 13.3.1
GPU model: Apple M1 Pro
Number of cores: 16
Amount of memory (RAM): 32GB

Comment 1

[Florian Quèze [:florian]]

It seems there are 2 different ways in which power is wasted on this page:

1. Animating the clouds. The CSS rules used to animate the clouds look like this:

@keyframes wolken1 {
    0% {
        opacity: 1;
        background-position: 0 0
    }

    5% {
        opacity: .75;
        background-position: 60px 0
    }
...
    100% {
        opacity: 1;
        background-position: 1200px 0
    }
}

@keyframes wolken2 {
    0% {
        opacity: 0;
        background-position: 0 0
    }

    25% {
        opacity: .5;
        background-position: 300px 0
    }
...
    100% {
        opacity: 0;
        background-position: 1200px 0
    }
}

.wolken1 {
    animation-duration: 200s;
    animation-iteration-count: infinite;
    animation-name: wolken1;
    animation-timing-function: linear;
    background: url(../img/welt-start/wolken1.png) repeat-x rgba(0, 0, 0, 0);
    left: -100%;
    top: 0;
    width: 300%;
    opacity: .8;
    background-position: 0 0
}

.wolken2 {
    animation-duration: 71s;
    animation-iteration-count: infinite;
    animation-name: wolken2;
    animation-timing-function: linear;
    background: url(../img/welt-start/wolken1.png) repeat-x rgba(0, 0, 0, 0);
    left: -200%;
    top: 70px;
    width: 400%;
    opacity: .4;
    background-position: 300px 0
}

Looking at the profile, the background-position-x and background-position-y properties are animated, but not on the compositor. Is this what's causing excessive resource use? Looks similar to bug 1701437.

2. There's an animated gif image in the menu (https://www.wdrmaus.de/codebase/img/menue_maus.gif), that we animate all the time, despite it being invisible.

The structure of the menu is:
<div style="height: 0; overflow: hidden;"><span style="background-image: url(../img/menue_maus.gif);">...
When the menu is opened with a click, height: 100%; is added to the CSS rules of the div, and the animated image becomes visible.

Emilio, does any of this look actionable?

Comment 2

[Emilio Cobos Álvarez (:emilio)]

The main thread doesn't seem unexpectedly busy in my profile? We need to tick because the clouds are animating, but modulo a few nanoseconds each frame we're idle. The clipped image could be fixed by bug 560067.

Is the extra resource usage coming from the GPU? Or something else?

Comment 3

[Dave Hunt [:davehunt] [he/him] ⌚BST]

The Performance Impact Calculator has determined this bug's performance impact to be low. If you'd like to request re-triage, you can reset the Performance Impact flag to "?" or needinfo the triage sheriff.

Platforms: macOS
Resource impact: Some