Awkward animation of dashes at certain zoom levels

[Helium314]

Describe the bug
When crossing certains zoom levels (possibly near whole numbers, but I did not check), dashed lines have some sort of animation, which look out of place.

dashes.mp4

To Reproduce
Steps to reproduce the behavior:

1. Have a line layer with dashes, in this case { "id": "steps", "source": "jawg-streets", "source-layer": "road", "filter": ["all", ["in", ["get", "class"], ["literal", ["path"]]], ["in", ["get", "type"], ["literal", ["steps"]]], ["==", ["geometry-type"], "LineString"], ["!", ["in", ["get", "structure"], ["literal", ["bridge", "tunnel"]]]]], "type": "line","paint": {"line-color": "#f6eee6", "line-width": ["interpolate", ["exponential", 2], ["zoom"], 14.0, 0.35, 16.0, 0.7, 24.0, 179.2], "line-dasharray": [0.6, 0.4]} },
2. Scroll map to have some dashes in view
3. Zoom

Expected behavior
Dashes should appear stable, i.e. without anything moving.

Platform information:

• OS: Android 10 / LineageOS 17.1
• Platform Android
• Version 11.0.0

[westnordost]

The same issue exists for maplibre-gl-js. (Test by zooming in on some steps here https://streetcomplete.app/map-jawg/)

[1ec5]

Mapbox removed the dash transition in mapbox/mapbox-gl-js#12326 (after the fork). The rationale in mapbox/mapbox-gl-js#10605 was that, apart from looking funky, it also complicated adding support for data-driven styling with line-dasharray: maplibre/maplibre-gl-js#1235.

[westnordost]

The issue occurs because MapLibre assumes that the map style itself does not dynamically interpolate the size of the (dashed) lines depending on the zoom level. The style used in the the StreetComplete style linked above scales the line-widths of roads, outlines etc. with the zoom level while most other styles don't.

[westnordost]

(FWIW, reproducible with org.maplibre.gl:android-sdk:11.3.0-vulkan-pre0)