User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:77.0) Gecko/20100101 Firefox/77.0

Steps to reproduce:

Load a relatively complex javascript animation (https://looping-squares.superhi.com/) in Firefox. Tested on Mac OS Catalina with Beta 77.0b3, Nightly 78.0a1 and Developer 77.0b3, and on Android with Firefox Nightly 200512 06:01. I found similar results with WebRender enabled and disabled.

Actual results:

Very slow performance, around 2fps on desktop, around 0.25fps on Android. Audible fans on desktop indicating high CPU usage. Profile: https://perfht.ml/2Z0ocZq

Expected results:

Good performance without noticably dropping frames and without high CPU usage, as observed in Google Chrome on both desktop and mobile.

Hi! The profile seems missing some information, can you please increase the buffer size and capture a new profile (with WebRender enabled)? Thanks!

Hi Sean, sorry - first time using the profiler! Is this any better? https://perfht.ml/2xXHTWs

This issue is also filed at https://bugzilla.mozilla.org/show_bug.cgi?id=1637586 - it seems to be specific to this type of animation rather than complex javascript animations in general like I'd originally suggested.

Based on the profile refreshdriver is running pretty exactly every 16ms (60fps). And very little else is happening in child process.
Rendered shows long Composite times.

On Linux the animation is very smooth.

With webrender there are way too many draw calls (a bit less than 3k). There's also quite a bit of blob image activity in there, probably participating in the high IPC latency as well.

I believe https://jackbox.tv/ is also affected by this bug, a quick example is Push the Button from Jackbox Party Pack 6, it uses animation for the background. Testing on Android with Nightly 201110 17:02 on a phone with a Snapdragon 855 with WebRender enabled is affected. First time profiler, hope this helps: https://share.firefox.dev/2UhfFxk