1420508 - Scroll-driven D3.js SVG graphics are slow

Status: RESOLVED WORKSFORME

(Core :: SVG, defect, P3)

Description

[Martín González Gómez]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171112125346

Steps to reproduce:

To test this, go to a scroll-driven D3.js graphic, like [0], [1], [2] or [3].

[0]: https://www.nytimes.com/interactive/2017/09/09/us/hurricane-irma-records.html
[1]: https://www.nytimes.com/interactive/2015/07/24/business/international/the-world-according-to-china-investment-maps.html
[2]: https://www.nytimes.com/interactive/2017/11/15/us/politics/every-tax-cut-in-the-house-tax-bill.html
[3]: More examples: http://vallandingham.me/scroll_talk/examples/.


Actual results:

Firefox is way slower than Chrome or Safari while transitioning SVG attributes. It doesn't feel smooth and the experience suffers a lot.

It also uses a lot of CPU. In general my Macbook Pro has to start using the fan (this doesn't happen on Chrome or Safari).


Expected results:

Firefox should be as smooth or smoother than Chrome or Safari and should use less CPU.

Comment 1

[Martín González Gómez]

Firefox has gotten much faster. At least on a M1 Macbook there's no trouble with these graphics anymore.