Visual glitches with stacked fill-extrusion layers
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
I'm stacking several `Polygon` layers in a GeoJSON to render the floors of a building in Mapbox GL JS using the `fill-extrusion` layer type. This mostly works fine, but I frequently see some visual glitches in the form of white dots in the seam between floors of the building. These flicker in and out as you rotate/zoom the map. They appear for some but not all sides of some but not all buildings.

Curious if this is a known issue and whether there's a workaround. Here's all the data you need for a repro. I'm on Mapbox GL JS 0.52 and Mac OS X 10.13.6 with Chrome 71.0.3578.98, but I've seen this across a couple of devices.
* [mapbox studio repro](https://api.mapbox.com/styles/v1/danvk/cjqskihj30dcy2sqha7xaripx.html?fresh=true&title=true&access_token=pk.eyJ1IjoiZGFudmsiLCJhIjoiY2lrZzJvNDR0MDBhNXR4a2xqNnlsbWx3ciJ9.myJhweYd_hrXClbKk8XLgQ#18.12/22.226877/-111.104884/9/60)
* [Gist of GeoJSON data](https://gist.github.com/danvk/a5947c4d4488500bf2dc3fcc8acc2407)
Style:
```json
{
"fillExtrusionPaint": {
"fill-extrusion-base": {
"property": "min_height",
"type": "identity"
},
"fill-extrusion-color": "#ffffff",
"fill-extrusion-height": {
"property": "height",
"type": "identity"
}
}
}
```
**mapbox-gl-js version**: 0.52
**browser**: Chrome 71.0.3578.98 / Mac OS X 10.13.6
### Steps to Trigger Behavior
1. Click this [mapbox studio link](https://api.mapbox.com/styles/v1/danvk/cjqskihj30dcy2sqha7xaripx.html?fresh=true&title=true&access_token=pk.eyJ1IjoiZGFudmsiLCJhIjoiY2lrZzJvNDR0MDBhNXR4a2xqNnlsbWx3ciJ9.myJhweYd_hrXClbKk8XLgQ#18.12/22.226877/-111.104884/9/60)
2. Right click to rotate around
3. Observe the glitchy white lines
### Link to Demonstration
[mapbox studio link](https://api.mapbox.com/styles/v1/danvk/cjqskihj30dcy2sqha7xaripx.html?fresh=true&title=true&access_token=pk.eyJ1IjoiZGFudmsiLCJhIjoiY2lrZzJvNDR0MDBhNXR4a2xqNnlsbWx3ciJ9.myJhweYd_hrXClbKk8XLgQ#18.12/22.226877/-111.104884/9/60)
### Expected Behavior
### Actual Behavior
cc @pandananta
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Mapbox Studio reproduction and the linked GeoJSON data, using the reported fill-extrusion style and rotating or zooming the map to observe the flickering white seams. No source file or test is named in the issue, so trace the fill-extrusion rendering path from this reproduction. Done means reproducing the artifact and establishing a fix or documented workaround for stacked floors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- computer-graphics, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100