Mapbox-gl-native: Marker symbol flickering issue while zooming out

[ystsoi]

Platform: Android / iOS
Mapbox SDK version: 9.2.1 / 5.9.0

Steps to trigger behavior

1. For Android, can use the Mapbox Demo app, open the Styles > Symbol layer icons example. For iOS, can use the Add a marker symbol example.
2. Zoom in and out, using the one-finger zoom gesture, for example. Zoom quickly if needed.

Expected behavior

No flickering.

Actual behavior

You will notice that the marker symbol will flicker at some points while zooming out.

[abrahamhunt]

There is a bit of flicker on iOS 5.8.0 but it got much worse in 5.9.0

example_videos.zip

[mrfaa]

maybe related with https://github.com/mapbox/mapbox-gl-native/issues/16473 ?

[ystsoi]

Yes, both involve flickering issue.

For Android, the Mapbox Demo app is not updated for 9.3.0, so not tested.

For iOS, 6.0.0 is definitely much better than 5.9.0. Cannot reproduce the flickering issue easily now, although still exist sometimes.

[knov]

We've released Android v9.4.0 and iOS v6.1.0 which resolve #16473. We believe that this issue should now be resolved.

[ystsoi]

I have installed the Mapbox Demo app in Google Play, which is of v9.3.1, it seems that the symbols still flicker easily.

The marker symbol example for the iOS version is much better. iOS v6.1.0 is similar to iOS v6.0.0, not easy to reproduce the flickering issue.

[ystsoi]

Tested. This issue does not exist in the latest Mapbox Demo app (v9.5.0) in Google Play.

By the way, I found that adding a symbol which allows overlap may flicker sometimes on Android. For example, can add a button, and attach the following handler to reproduce the issue:

public void onClick(View v) {
    if (++index == 1) {
        style.addImage("test_icon", ContextCompat.getDrawable(MainActivity.this, com.mapbox.mapboxsdk.R.drawable.mapbox_user_icon));
    }
    double latOff = (mapboxMap.getProjection().getVisibleRegion().latLngBounds.getLatitudeSpan() * (Math.random() - 0.5)) * 0.8;
    double lonOff = (mapboxMap.getProjection().getVisibleRegion().latLngBounds.getLongitudeSpan() * (Math.random() - 0.5)) * 0.8;
    Geometry g = Point.fromLngLat(mapboxMap.getCameraPosition().target.getLongitude() + lonOff, mapboxMap.getCameraPosition().target.getLatitude() + latOff);
    Feature f = Feature.fromGeometry(g);
    GeoJsonSource s = new GeoJsonSource("test_source" + index, f);
    SymbolLayer l = new SymbolLayer("test_layer" + index, "test_source" + index);
    l.setProperties(PropertyFactory.iconAllowOverlap(true), PropertyFactory.iconIgnorePlacement(true), PropertyFactory.iconImage("test_icon"));
    style.addSource(s);
    style.addLayer(l);
}

And I found that changing the following lines:
https://github.com/mapbox/mapbox-gl-native/blob/3c1647273644a8a68100faa702a52e89a691425d/src/mbgl/text/placement.cpp#L790-L793
to:

const JointOpacityState defaultOpacityState(
        bucket.justReloaded && textAllowOverlap && (iconAllowOverlap || !(bucket.hasIconData() || bucket.hasSdfIconData()) || bucket.layout->get<style::IconOptional>()),
        bucket.justReloaded && iconAllowOverlap && (textAllowOverlap || !bucket.hasTextData() || bucket.layout->get<style::TextOptional>()),
        true);

may prevent this issue. Please check.