Closed Bug 1459381 Opened 7 years ago Closed 7 years ago

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

Categories

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

61 Branch
x86
macOS
defect

Tracking

()

RESOLVED DUPLICATE of bug 1407536
Performance Impact ?
Tracking Status
firefox61 --- affected

People

(Reporter: alberts, Unassigned)

References

()

Details

Attachments

(1 file)

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*.
*neat CSS animations
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.
A profile on Linux. https://perfht.ml/2HNxL6m
Component: DOM: Animation → Layout
Attached video billing animation - cpu (deleted) —
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%.
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
(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.
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.
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.
Component: Layout → CSS Parsing and Computation
Priority: -- → P3
I totally forgot that we have already a filed bug for stripe.com. Closing this as a duplicate.
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → DUPLICATE
Performance Impact: --- → ?
Whiteboard: [qf]
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: