Closed Bug 1558080 Opened 5 years ago Closed 3 years ago

Degraded performance with CSS animations


(Core :: Graphics, defect, P3)

69 Branch



Performance Impact high
Tracking Status
firefox68 --- affected
firefox69 --- affected


(Reporter: karlcow, Unassigned)




(Keywords: perf:responsiveness)

Initially reported on

I can reproduce this issue on desktop on macOS with Firefox Nightly 69.0a1 (2019-06-07)
I created a reduced test case on codepen for it.

If we compare in between Chrome and Firefox, the CSS animation is a lot smoother in Chrome.

Marking with [qf] because it could be performance related.

Comment from the reporter:

When the "Today in focus" podcast is in the viewport, performance is heavily degraded. FPS drops while scrolling, until the podcast player is no longer in the viewport. After that performance is back to normal. Works on mobile Chrome as expected.

The podcast player causing issues is not always shown on the page. To make it easier to reproduce it, here is the code causing the issue:

Also available here for more convenient testing:

Can you reproduce this with WebRender enabled? And what about other OSes?

It looks pretty ok here on WR on Linux.

Flags: needinfo?(kdubost)

I can reproduce on Linux with WebRender disabled. The main thread is quiet but the compositor process is maxed out. Moving to graphics.

Component: CSS Transitions and Animations → Graphics

As brian answered. :)

Flags: needinfo?(kdubost)
Whiteboard: [qf] → [qf:p1:responsiveness]

WFM with WebRender

Closed: 3 years ago
Resolution: --- → WORKSFORME
Performance Impact: --- → P1
Whiteboard: [qf:p1:responsiveness]
You need to log in before you can comment on or make changes to this bug.