Awkward animation of dashes at certain zoom levels

[westnordost]

This issue report is copied from maplibre/maplibre-native#2433, because the issue exists for both:

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.

333874738-2db05c9a-d582-4a53-b75c-1d91715a3a16.mp4

359876858-563b9d50-06fa-496f-b599-a078110062cf.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

Try it here: https://streetcomplete.app/map-jawg/
Zoom in on any highway=steps or private roads. These have dashes in this style.

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

More information
maplibre/maplibre-native#2433

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.

[HarelM]

Any chance you can create a minimal reproduction using jsbin/codepen/stackblitz?

[westnordost]

Hm sorry, I am not a web developer, I don't know nothing of that. But you can reproduce it here:
https://streetcomplete.app/map-jawg/
This also just loads maplibre-gl and the style. If you want to minimize the style, you can remove all layers except those that use a "line-dasharray". (See step 1 in "how to reproduce")

[CommanderStorm]

@westnordost
FYI, you can disable/get around this by using a step function like the following ^^

{
"line-dasharray": [
        "step",
        ["zoom"],
        ["literal", [0, 1]],
        20,
        ["literal", [0.1, 0.4]],
        21,
        ["literal", [0.1, 0.3]],
        22,
        ["literal", [0.05, 0.2]],
      ],
}