Dashed line dashes are clipped & offset at tile boundaries
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
**mapbox-gl-js version**: 0.40.1
### Steps to Trigger Behavior
1. Draw line with `line-dasharray: [0.1, 1.8]` and `line-cap: round` that crosses tile boundary
```
mapboxgl.accessToken = 'pk.eyJ1IjoicXVpY2tseXdpbGxpYW0iLCJhIjoibmZ3UkZpayJ9.8gNggPy6H5dpzf4Sph4-sA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [ -122.63480377210192, 45.49858719777322],
zoom: 20.505
});
map.showTileBoundaries = true;
map.on('load', function () {
map.addLayer({
"id": "route",
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [[-122.63332018999998, 45.49907065], [-122.63635848, 45.498128739999984]]
}
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#191",
"line-width": {
'base': 1.5,
'stops': [
[14, 5],
[18, 20],
],
},
"line-dasharray": [0.1, 1.8]
}
});
});
```
jsbin: http://jsbin.com/kiqinefopa/edit?html,output
### Expected Behavior
Dashes are shown at regular spacing regardless of tile boundary locations; no artifacts are visible at tile boundaries
### Actual Behavior
Dash positions appear shift between tiles and are clipped at tile boundaries. The effect varies with zoom level.

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 supplied jsbin reproduction and the mapbox-gl-js line layer using line-dasharray, line-cap, and a line crossing a tile boundary. Trace the tile-boundary rendering path and verify behavior at multiple zoom levels; done means dash spacing remains regular and no clipping or offset artifacts appear at tile boundaries.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100