Zoom Icons render differently on browsers

[googol7]

Leaflet 1.2.0

Safari Version 11.0 (12604.1.38.1.7)
Chrome Version 61.0.3163.100 (Offizieller Build) (64-Bit)
Firefox 55.0.3 (64-Bit)
Opera 47.0.2631.83
Microsoft Edge 38.14393.0.0

This screenshot is taken from the homepage http://leafletjs.com

[cherniavskii]

Please do not ignore Issue Template.
It's not clear what behavior you expect.
Every browser renders fonts / borders / shadows / etc differently. So it's okay, that those controls look different in different browser.

[googol7]

I expect that the icons look the same in every browser. I might add custom icons below the zooming icons and I want to be sure that the style of my icons match the style of the built in zooming icons (same height and width).

[cherniavskii]

Styles are slightly different depending on Browser, because in case of Browser.touch leaflet-touch class is added to map containers, which overrides some styles.
You can easily override default Leaflet styles if you want to.

[perliedman]

Hi @googol7, @cherniavskii describes the situation well.

The major difference is whether Leaflet detects touch or not, which affects the size of the controls (slightly larger for touch to make them easier to hit), as well as the shadow/border, presumably since some lower end devices had/have problems with box-shadow.

I'm closing this issue, since this is not a bug, but rather works as designed as far as I can tell.

[nrenner]

See also #5266

[anatel]

Is there an option to avoid the leaflet-touch from being added?
If not, how can it be overridden easily?

[johnd0e]

Is there an option to avoid the leaflet-touch from being added?

Use L_NO_TOUCH switch.

https://leafletjs.com/reference-1.7.1.html#global-switches