z-fighting on layers with overlapping polygons

[danswick]

Platform: Android, iOS, macOS
Mapbox SDK version: 4.2.0-beta.3 on Android and iOS v3.4.0-alpha.5

Steps to trigger behavior

1. Ensure your style contains a fill layer with some transparency at least one incidence of overlapping polygons.
2. Bring overlapping polygons into view.
3. Tilt the map.

Expected behavior

Area of overlap between polygons should be less transparent than non-overlapping areas.

Actual behavior

Area of overlap flickers as the map is moved and evidence of z-fighting is visible (see screenshots below).

I went ahead and created some overlapping polygons in the dataset editor and added them to the Mapbox Light style (html embed page here). z-fighting is not present on the web using Mapbox GL JS, but is visible on an Android device (Nexus 5x running Android 7) as well as on macOS:

Android

macOS

cc @1ec5 @alinapaz

[alinapaz]

@boundsj Clarifying we're seeing this issue with some custom styles as well.

[jfirebaugh]

@ansis @kkaefer Thoughts?

[foundryspatial-duncan]

This issue mentions iOS, Android, and OSX; I just wanted to add that it happens in Ubuntu as well. Here are some more screens:

(Not tilted)

(Tilted)

(Tilted more)

edit: Oops, sorry. I found this issue from Google - the screenshots above are from Mapbox GL Js, not Mapbox GL Native.

[jfirebaugh]

Fixed by #9930 on master and #9942 for iOS 3.6.3 / Android 5.1.4.