Maps are slow / lag on iOS Safari (mobile)

[merganon]

Description

Heys guys, thanks for your work!

I have noticed that the maps tend to be very slow and laggy on iPhones. Swiping and zooming around is raggedly.

Repro Steps

Choose any map on the examples page on an iPhone: https://visgl.github.io/react-map-gl/examples
Especially: https://visgl.github.io/react-map-gl/examples/clusters

On computer the maps are running fine and smooth, however on iPhones (which use WebKit as render engine for their browsers) swiping and zooming is very laggy.

Environment (please complete the following information):

• Library Version: ^6.1.16
• React Version: ^17.0.2
• Browser Version: Safari 14.1
• OS: iOS 14.6

[Pessimistress]

Which model of iPhone are you using? I have a SE 2020 and do not notice any lagging with the website.

[merganon]

I'm on an iPhone 6s with latest version of iOS (14.6)

[KoenLav]

We are experiencing the same issue (even after memoizing our layers/features): mid-range Android phones (200 EUR) working perfectly fine, high-range iPhone (1400 EUR) working very glitchy.

We were using react-mapbox-gl first, where we noticed the issue, then switched to this package but the issue persists. So it is possible the issue is with MapBox GL JS in general.

We have narrowed down the problem to (much) more frequent calls to onViewportChange on iOS when compared to Android/Windows (probably touch events firing more frequently in iOS).

What we did for now was debounce the onViewportChange method with 2ms, which seems to have alleviated the issue (although obviously this also makes the interface a little more glitchy for every device, rather than only the devices with the issue).

[KoenLav]

A suggestion: we would like to use asynRender AND not use state to control the viewport, whilst still being able to pan/zoom the map.

This way we can enjoy 100% of the 'native' Mapbox GL JS performance whilst still being able to use onViewportChange or onViewStateChange to figure out when we want to 'refresh' the GeoJSON layers.

We're not making use of Markers or Popups, so these getting out of sync doesn't matter to us.

@Pessimistress would this be possible? (Happy to work on a PR, preferably with some pointers to start.)

ps if we would need to programmatically change the viewport of the map we would access the 'native' instance.

[Pessimistress]

If you set asyncRender={true} on the map component it should give you the same rendering behavior as native mapbox-gl.

[Pessimistress]

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