1558080 - Degraded performance with CSS animations

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect, P3)

Description

[Karl Dubost💡 :karlcow]

Initially reported on https://webcompat.com/issues/32240

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.
https://codepen.io/webcompat/pen/mZbVdj

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: https://gist.github.com/lassir/2f14bddafa56ddccd2247ecce7029bbc

Also available here for more convenient testing: https://storage.googleapis.com/56cd4c4f/theguardian-today-in-focus.html

Comment 1

[Emilio Cobos Álvarez (:emilio)]

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

It looks pretty ok here on WR on Linux.

Comment 2

[Brian Birtles (:birtles, Feb 26~ parental leave)]

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

https://perfht.ml/31iaik5

Comment 3

[Karl Dubost💡 :karlcow]

As brian answered. :)

Comment 4

[Olli Pettay [:smaug][[e-mail]]]

WFM with WebRender