Marker symbol flickering issue while zooming out

ystsoi commented 4 years ago

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

Steps to trigger behavior

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.
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 commented 4 years ago

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

example_videos.zip

mrfaa commented 3 years ago

ystsoi commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.

mapbox / mapbox-gl-native