1459381 - CSS animations cause high CPU/GPU on stripe.com (macOS)

Status: RESOLVED DUPLICATE of bug 1407536

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Albert Scheiner [:alberts]]

I just ran into a 150% CPU spike when opening https://stripe.com/au as they have some need CSS animations + opacity changes running behind the animated SVG above "Developers first" - see the little language image icons: https://screenshots.firefox.com/TEfMTEmwIIVumZLx/stripe.com

Deleting the CSS animations CPU drops to ~25% with only the SVG animations running. GPU rises as well - checking its temp with "Macs Fan Control". And the fans get noisy.

Switching to another tab will immediately drop the CPU usage and the CPU/GPU temperatures. 

Second example is from the subpage https://stripe.com/au/billing. The second animation further down ("End-to-end billing ...") ends with a "replay" button. This causes a smaller, but similar spike:
- main process ~1% => 65% CPU
- content process ~3% => 65% CPU
- CPU/GPU temperature increases from ~60˚C => ~80˚C

This is Webrender *disabled*.

Comment 1

[Albert Scheiner [:alberts]]

*neat CSS animations

Comment 2

[Hiroyuki Ikezoe (:hiro)]

As far as I can tell there is no CSS animation (at least on my Linux box).  It seems to me that the animation are driven by style changes in requestAnimationFrame callback or something like that.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

A profile on Linux.
https://perfht.ml/2HNxL6m

Comment 4

[Albert Scheiner [:alberts]]

Attachment: billing animation - cpu

video showing high CPU on slack/billing and animation, tab change for CPU to normalise and switching back to animation to see CPU raising well over 100%.

Comment 5

[Albert Scheiner [:alberts]]

Sorry for confusion, I meant to write _stripe/billing_.

All numbers and video above are from my normal user profile. Here are some perf profiles with a test user profile (macOS 10.11.6):

Homepage: https://perfht.ml/2HVTrJF
Billing: https://perfht.ml/2HUtQRe

Comment 6

[Xidorn Quan [:xidorn] UTC+11]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #3)
> A profile on Linux.
> https://perfht.ml/2HNxL6m

It seems half of the time keeps CPU busy is from painting, so it could either an issue in painting, or an issue in style system which may be generating improper change hints.

Comment 7

[Xidorn Quan [:xidorn] UTC+11]

The profiles in comment 5 basically match what can be seen from the profile in comment 3. Painting takes about half of the time, and there is a non-negligible portion is in styling.

Comment 8

[Xidorn Quan [:xidorn] UTC+11]

Move to style system for now. If it turns out that style system is not generating anything unreasonable, it should probably go to painting component.

Comment 9

[Hiroyuki Ikezoe (:hiro)]

I totally forgot that we have already a filed bug for stripe.com.  Closing this as a duplicate.