1420696 - Some CSS cause high CPU usage by "recalculate style" (example: Amazon Seller Central, inventory)

Status: RESOLVED WORKSFORME

(Core :: DOM: Animation, defect, P3)

Description

[energy4you]

Attachment: examples_css.zip

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171112125346

Steps to reproduce:

Login to Amazon Seller Central (login possible only for Amazon marketplace sellers) and go to inventory:
https://sellercentral.amazon.de/inventory



Actual results:

- CSS cause permanent high CPU load in Firefox 57 on Windows 10 by "recalculate style", both on PCs with or without dedicated GPU. Approx. 1 CPU core is at 100% usage each time as long as the inventory site is open, no matter if there is user interaction or not.
-CPU load stops as soon as CSS is forbidden (but then the site is no more displayed correctly).
- Firefox until version 56 had the same issue, but "only" about 50% permanent load on one CPU core.
- Some, but not all other users I asked confirm the issue.
- Name of CSS files:
JQueryUI_Datepicker_AUIBuild-aa61a66b120ce16c4a50eace62d0b9976d6cea04._V2_ 
61MsShHyNCL._RC-11Fd9tJOdtL.css,21y5jWQoUML.css,31Q3id-QR0L.css,31eh5a4qZUL.css_


Expected results:

Safari as well as Chrome and Edge seem not to have this issue.

Comment 1

[Jet Villegas (inactive)]

E-mail sent to our Amazon contacts to get a testing view into Amazon Seller Central.

Comment 2

[bintoro]

Here's a freely accessible site that demonstrates the same or similar issue: https://tilisanomat.fi/lakiratkaisut-ja-suositukset/kho-ja-kvl-tuloverotus/kho-20086-erilajiset-osakesarjat-ja-osinkotulo

The page has seemingly nothing going on, but Firefox eats up 100% CPU. The profiler shows an endless battle between "Apply Style Changes" and "Recalculate Style".

This is on a Mac and a recent Nightly. Chrome and Safari perform fine.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

So from a quick look at the page at comment 2, all those restyles are posted from KeyframeEffectReadOnly, which means that there's an animation going on. There are indeed a bunch of continuous restyles:

  https://perfht.ml/2EMO4dz

Hiro, is there any chance you could take a quick look at this? You're more likely to identify the problem faster than I :)

Comment 4

[Hiroyuki Ikezoe (:hiro)]

That's because of bug 1430884.  The animations in question are running on visibility:hidden elements but unfortunately 0% keyframe value is not specified.  So the symptoms in comment 2 is definitely the same as bug 1430884.

energy4you, does this issue still persist on nightly?  I mean still consumes 100% cpu?

Comment 5

[Mark]

Nightly 2018-04-14 consumes ~100% CPU for me on the website in Comment 2, even after a few minutes left alone. WebRender off; MacBookPro 11,1; 1280x800

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Right, the animations on the site in comment 2 are not throttled at all due to bug 1430884.  I'd like to know the site in comment 0.

Comment 7

[energy4you]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #4)
> energy4you, does this issue still persist on nightly?  I mean still consumes
> 100% cpu?
On https://sellercentral.amazon.de/inventory, I currently have 4% permanent CPU load in idle with Firefox 59.0.2. This is still slightly more than for other websites with around 0-1%, but already much better than before. When I move the mouse pointer, CPU load rises to 10-20%.

Comment 8

[Hiroyuki Ikezoe (:hiro)]

(In reply to energy4you from comment #7)
> (In reply to Hiroyuki Ikezoe (:hiro) from comment #4)
> > energy4you, does this issue still persist on nightly?  I mean still consumes
> > 100% cpu?
> On https://sellercentral.amazon.de/inventory, I currently have 4% permanent
> CPU load in idle with Firefox 59.0.2. This is still slightly more than for
> other websites with around 0-1%, but already much better than before. When I
> move the mouse pointer, CPU load rises to 10-20%.

Thank you!  That's very helpful to know what's going on that site.
4% CPU usage means that there are some running animations but properly optimized.  And 10-20% CPU usage by mouse moving means that we do forcibly styling for those optimized animations when moving mouse.

Anyway the original issue has been already fixed.