Flicker and artifacting on FillLayer after returning from background

[cvance]

Platform: Android
Mapbox SDK version: 6.1.1

Steps to trigger behavior

1. Add new geojsonsource to map
2. Add new FillLayer using geojsonsource to map
3. Zoom in and out (to verify no flickering/artifacts)
4. Home out
5. Re-open app
6. Zoom in and out, see flickering/artifacts

Sample code:
https://gist.github.com/cvance/1a46db588025076f8d82431b26195291

Demonstration Video:
https://imgur.com/QR9kUCn

[cvance]

Bump?

[vanshg]

@tobrun @cammace Any ideas?

[femski]

I was also seeing significant amount of flicker and artifacts. Same style worked fine in GL JS. It would work fine in Native too as you pan around at same zoom level. But lots of problems when you zoom in and out. Map was essentially unusable.

Workaround I found was to combine two vector sources into one (I had an OSM source and one for aviation). This is less than ideal solution. My two sources have different MaxZooms so now I end up with bigger source file. But at least it works.

I suspect there is bug in handling tiles from two sources and over-zooming of parent tiles.

[LukasPaczos]

The issue also arises for the CircleLayer as seen below, no need for reopening the app mentioned in the OP:

Bisecting points to ed5438f (#10548).

/cc @brunoabinader @kkaefer

[kkaefer]

Same underlying issue as mapbox/mapbox-gl-js#6768: We're not clipping circle layers, and we aren't deduplicating features from overlapping tiles that are rendered into the same position (e.g. one parent child and one child tile containing the same point).

[kkaefer]

#10548 likely didn't introduce this bug but exacerbates it due to parent tiles being available earlier so that they can collide with child tiles.

[dsuresh-ap]

Are there any planned fix for this issue? It is the only thing holding us from our Layer API changes.

[cvance]

This has blocked our apps from upgrading to 6.x.x because symptoms gets even worse when you add multiple layers.

[mollymerp]

I can't reproduce the fill-layer flicker using just the glfw view, so there might be something else going on there on the android side.

I can reproduce the circle layer flicker. I can get rid of 90% of flickering by limiting parent tile retention for geojson sources to 1 ZL below the camera zoom or preventing prefetching for geojson sources. I will test that solution in with the android location plugin tomorrow. I think complete fix will require manual vertex clipping for tiles with an overlapping parent loaded which may have performance implications.

[cvance]

I believe you are right about it being on the android side. I dont know that we saw it on iOS. However I do not think its limited to geojson sources. We see it with vector sources, if not worse.

[dsuresh-ap]

@mollymerp did the last PR fix the issue or are there other issues involved. I just updated to 6.4.0 and I still see some issues.

Recording

[cvance]

I'm experiencing the same. I'm continuing to investigate but I cannot track down the source of this issue as it happens with our app using vector tiles.

However on the initial example I posted, I have discovered more information. In that example, the flickering & artifacting only occurs after I background the app then re-open it. It appears the problem stems from MapView's onStop() method, when it calls mapRenderer.onStop(). If I disable this call I do not see any rendering issues when the app returns to the foreground.

[julianrex]

@kkaefer @mollymerp Wondering if the root cause of this could also be the explanation for #12452 (or partly)

[kkaefer]

@julianrex no, I think that's unlikely. This issue is about circle layers that appear twice, while the other is about line layers that don't seem to be tiled correctly.

[tobrun]

This should be fixed with implementing #12586 in #12654. Feel free to test this out with the 6.5.0-alpha.1. Closing for now, feel free to reach out if still an issue.

[dsuresh-ap]

@tobrun We are still seeing the issue on 6.5.0-alpha.1. No backgrounding needed to trigger it. While zooming there is flickering until the loading of the tile under stops.

I thought it might have been the opacity that we added but as you can see in the recording below we removed it from the rectangle and there is still artifacts.

Recording

[dsuresh-ap]

@tobrun Flickering issue also happens in the MapBox Demo app for Android on branch maps-6.5.0. If you go to the Draw multiple geometries example in Data-driven styling you will see the same issue happening.

[tobrun]

Confirming that I'm indeed able to replicate it with code from OP, not same issue as with #12586.

[LukasPaczos]

I'm able to reproduce with the LatLngBoundsForCameraActivity.

[mollymerp]

consolidating this issue with other related ones over at #12981