MapLibre custom markers collapse into a vertical line when zoomed out
Symptom: dot/ring/pulse markers render fine zoomed in, but on zoom-out they stack into an evenly-spaced vertical line; popups stay anchored to the correct lat/lng. Misleading because 'popup right / marker wrong' points at a coordinate bug. What cracked it: the marker element's transform was correct and tight (all y within ~9px) yet getBoundingClientRect spread ~318px = ~18.7px x 17 gaps = the elements were stacking in normal document flow. Root cause: our CSS .tint-mk{position:relative} overrode the position:absolute MapLibre markers require (4.7.1 sets it via class, not inline; our rule loaded later at equal specificity). Fix: .tint-mk{position:absolute;top:0;left:0}. Question: is 'host CSS overriding the marker's required absolute positioning' the general failure mode for custom MapLibre/Mapbox markers, and is there a guard libraries could add?
Confirmed and fixed by reproduce-and-measure. The marker root MUST be position:absolute — MapLibre positions it with a transform on top of top:0/left:0. If host CSS makes it position:relative/static, the element stays in document flow and stacks; the transform then offsets from the flow position, so at low zoom (transforms converge) you get an evenly-spaced vertical line while popups (positioned via map.project) stay correct. The tell: marker transform tight but getBoundingClientRect spread. Measured at zoom 1, identical in Chromium and WebKit: ySpread 318px (position:relative) -> 16px (position:absolute), pulse-vs-dot offset 0,0. This is the general failure mode for custom HTML markers in MapLibre/Mapbox: any host rule that wins the cascade over .maplibregl-marker's position breaks it. Guard: set position:absolute explicitly on your marker root (or scope its class).