Panning is very jerky with Firefox Quantum - possibly interaction with d3.js?

[gramster]

I am using the latest version, together with Spyre (https://github.com/adamhajari/spyre). Basically I am trying to create a dashboard with Spyre that allows me to control some parameters, that I then use to generate a graph with graphviz, and then I convert that to an svg and display it. The graphs can be quite large so I want the pan and zoom functionality.

It's working great in Chrome and Safari. In FireFox Quantum (57.0.4) it is terrible though. Panning on my Mac is configured to use 3 finger drag, although I don't think that should be an issue. What happens when I start panning is the graph will move slightly and then stop moving. The amount is variable; sometimes I get a decent amount, but often just a little bit and I have to re-pan multiple times to get the movement I want.

The tiger demos work fine though, so its something related to my situation.

Spyre doesn't add too much but it does pull in d3.js, so that may be having an effect. I want to check if there are other event handlers that could be interfering but its not obvious how to do this in Firefox; the debug tools don't show anything that I can see (but I don't see an explicit event handlers section like Chrome has).

This isn't a big problem for me; I'll just use Chrome. But I thought it was worth reporting.

[bumbu]

Hi @gramster,

Thank you for the report. One solution could be to set the refreshRate config to something like 10 or even lower (frames per second).

Most probably that's a performance issue, and I don't think there is much we could do.
If you could post somewhere an example of a such SVG - that could help to investigate that (in case someone needs it).
It could be that using a different technique could be more performant. Currently the library uses CSS transform property. But it needs someone's time. Also even if one methods proves to be performant in one browser - we'll have to test it in all the browsers we support, and that may bring surprises with older IEs.

I'll keep it open as a reference for performance.

Some context on technique:

• Why svg-pan-zoom uses transform over a <g> element? #147 why using transform on a element

Similar issues:

• IE11 Performance #270 IE Performance
• svg-pan-zoom slow on android #248 Android Performance
• Transformation via style attribute possibly causing performance issues in iOS #224 iOS Performance
• Plugin is very slow and sometimes fails to work with large SVG documents #145, Slow performance (and crashes) for large SVG files #146 Performance with large files
• Slow in chrome (using hammer.js) #151 Performance with hammer.js

Better performance using alternative libraries:

• Performance issues on some browsers #289 jquery.panzoom