Performance issues on Firefox for mobile

[danton004]

Hi,

I´ve noticed lag on react-map-gl maps when accesing them on Firefox for mobile devices. It´s enough to open the examples webpage (https://uber.github.io/react-map-gl/#/Examples/markers-popups). This examples work perfectly and fluent on Chrome but very laggy on Firefox.

I´m working on a map with markers and layers and I can´t make it work fluently on Firefox. Is there any way to improve performance or any workaround that may help?

Thanks in advance,

David

[RobJacobson]

I'm having the same problem with all of the major browsers on iOS (Firefox, Safari and Chrome). I tested this with the markers example on a new iPad Pro. Since these browsers all use Apple's Webkit rendering engine under the hood, it makes sense that they would have comparable performance.

In the example above, the underlying map is quite smooth and fluid. However, the movement of the markers definitely lags behind the map. This makes the markers look "jiggly," like they're located on top of a layer of Jell-O. It's an unsatisfying result.

This does not happen when using some examples from Mapbox-GL, like the one below. The icons here move in sync with the map. This example uses a GeoJSON source for the icons, rather than separate markers.
https://docs.mapbox.com/help/demos/gl-store-locator/step-five.html

This may be related to Issue #750, which discusses poor desktop performance when there are many markers on screen. The consensus seems to be to use GeoJSON instead of individual markers, but that would require a major workaround and eliminate some of the advantages of react-map-gl over regular mapbox-gl.

I'd love to hear more about these issues. Just thinking aloud, one option might be to create a new "GeoJSON marker" component that takes individual markers in React and automagically converts them to a GeoJSON layer. However, that's beyond my skill level at the moment.

[jrmuizel]

We're tracking this on the Firefox side here: https://bugzilla.mozilla.org/show_bug.cgi?id=1602798

But it seems like react-map-gl has pretty big performance problem. Profiling https://uber.github.io/react-map-gl/#/Examples/markers-popups on desktop in Chrome shows more than 16ms being spent handling pointermove events. The majority of the time is spent javascript.

[RobJacobson]

Thanks, @jrmuizel. I'm incredibly glad you're looking into this. I have a demo app at the link below that uses react-map-gl:
www.ferrytime.surge.sh

On my two-year-old Android phone, there's a marked difference between Firefox and Chrome, especially when dragging the map with your finger. In Chrome, the performance is satisfactory -- smooth and mostly without lag. In Firefox, the performance is much worse. The rendering seems to be in the single frames per second, and the lag is painful.

On my iPad, the performance is equivalent (presumably since both browsers use the same rendering engine). The animations are smooth but the "jiggling" effect is pronounced in both Chrome and Firefox. This is most obvious if you pan the map slowly.

[Pessimistress]

I do not own an android phone for debugging. Are you able to identify the difference between FF and Chrome - e.g. are touch events fired more frequently?

[RobJacobson]

Could you please explain how to measure these metrics? I'm not sure how to determine the number of touch events.

[doraeric]

I am using this library on desktop, and I notice the performance issue in firefox, too.
The example above is not working now, I am using the link: https://visgl.github.io/react-map-gl/examples/controls
There are significant differences between firefox and chrome on ubuntu and windows. Just zoom in and out several times, and it becomes very laggy in firefox.

I have tried other example at https://www.mapbox.com/maps/streets and http://alex3165.github.io/react-mapbox-gl/demos , and I didn't feel laggy. I am not sure is the performance issue only exists in the library or the examples are too simple.

[Pessimistress]

This is being addressed in v7.0. Please follow #1646