CSS: Leaflet markers borders stay displayed as undesirable effect

Viewed 1140

After have changed marker icon (same as original, just colorized), borders are still displayed under Firefox, not from Chromium :

you can see

This CSS code has no effect:

border: none; / border: 0;
overflow: hidden;

An idea to force hide this undesirable effect?

2 Answers

In fact, this effect has added by an outside element: .leaflet-pane.leaflet-shadow-pane ; no rule applied on .leaflet-pane.leaflet-marker-pane that contain markers. Code inspection has been not easy: element to hide

Solved by simple display: none; rule on this element .leaflet-pane.leaflet-shadow-pane: you can see

Seems rather like the "border" you see is actually the placeholder for a broken image.

Typically if your custom Marker icon's shadow is missing (e.g. you forgot to change its default value, while not providing the default shadow image asset)

This would also explain the different behaviour between browsers, since each of them hints for broken image differently.

Related