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)
Tracking
()
RESOLVED
DUPLICATE
of bug 1407536
Performance Impact | ? |
Tracking | Status | |
---|---|---|
firefox61 | --- | affected |
People
(Reporter: alberts, Unassigned)
References
()
Details
Attachments
(1 file)
(deleted),
video/ogg
|
Details |
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*.
Reporter | ||
Comment 1•7 years ago
|
||
*neat CSS animations
Comment 2•7 years ago
|
||
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•7 years ago
|
||
A profile on Linux.
https://perfht.ml/2HNxL6m
Component: DOM: Animation → Layout
Reporter | ||
Comment 4•7 years ago
|
||
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%.
Reporter | ||
Comment 5•7 years ago
|
||
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•7 years ago
|
||
(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•7 years ago
|
||
Comment 8•7 years ago
|
||
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
Updated•7 years ago
|
Whiteboard: [qf]
Updated•7 years ago
|
Priority: -- → P3
Comment 9•7 years ago
|
||
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
Updated•3 years ago
|
Performance Impact: --- → ?
Whiteboard: [qf]
You need to log in
before you can comment on or make changes to this bug.
Description
•