Issue with line-dasharray and starting offset of 0

Nobody has claimed this yet.

**mapbox-gl-js version**:
0.53.1
**browser**:
Chrome
### Steps to Trigger Behavior

1. use `line-cap: round`
2. use `line-dash-array: [0, 10, 10, 10]`

### Link to Demonstration

### Expected Behavior
There shouldn't be artifacts along the line

### Actual Behavior
There are artifacts for 0 starting offset:

code:
```html

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

mapboxgl.accessToken = 'your-key';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-122.486052, 37.830348],
zoom: 15
});

map.on('load', function () {

map.addLayer({
"id": "route",
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-122.48369693756104, 37.83381888486939],
[-122.48348236083984, 37.83317489144141],
[-122.48339653015138, 37.83270036637107],
[-122.48356819152832, 37.832056363179625],
[-122.48404026031496, 37.83114119107971],
[-122.48404026031496, 37.83049717427869],
[-122.48348236083984, 37.829920943955045],
[-122.48356819152832, 37.82954808664175],
[-122.48507022857666, 37.82944639795659],
[-122.48610019683838, 37.82880236636284],
[-122.48695850372314, 37.82931081282506],
[-122.48700141906738, 37.83080223556934],
[-122.48751640319824, 37.83168351665737],
[-122.48803138732912, 37.832158048267786],
[-122.48888969421387, 37.83297152392784],
[-122.48987674713133, 37.83263257682617],
[-122.49043464660643, 37.832937629287755],
[-122.49125003814696, 37.832429207817725],
[-122.49163627624512, 37.832564787218985],
[-122.49223709106445, 37.83337825839438],
[-122.49378204345702, 37.83368330777276]
]
}
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#888",
"line-width": 8,
"line-dasharray": [0, 10, 10, 10]
}
});
});

```

Screenshot:

More info:
I would like to create an ant-path using animation.
I have looked at the examples below in the SO question:
https://stackoverflow.com/questions/43057469/dashed-line-animations-in-mapbox-gl-js
In these examples the artifacts are less visible since the `line-cap` is `butt` but still there.

Start with the provided HTML reproduction, especially the map.addLayer configuration using round line caps and line-dasharray [0, 10, 10, 10]. Trace the line-dasharray rendering path and reproduce the case in Chrome. Done means the artifacts no longer appear for a starting offset of 0, including with round caps.

Written by the indexing model from the issue text.