Border around layercontrol not consistent with border around zoom control on mobile

[ICarryTheDustOfAJourney]

On a full up-to-date Galaxy S3, S2 and Nexus 7 (Chrome and Firefox) the borders around the +- zoom control are transparent, but around the layer control its completely opaque.

[mourner]

I don't understand how that can be possible, as there's only one CSS line related to both zoom control and layers control and it sets the same border for them: https://github.com/Leaflet/Leaflet/blob/master/dist/leaflet.css#L392

Maybe it's something on your app side?

[ICarryTheDustOfAJourney]

Maybe it's something on your app side?

I don't think so. Even if I modified the CSS, it would apply to both controls.
Am I the only one seeing this?

Meanwhile I found a solution:

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
    border: 4px solid rgba(0,0,0,0.3);
background-clip: content-box;   
    }

I suppose its an inherited problem, but I haven't dug further.

Update:
Careful, this now leads to an strange effect when opening the layer list.

Update 2:

background-clip: padding-box;

doesn't mess up the layer list but draws a decent transparent border around it.

[mourner]

@Grundguetiger that's really weird! I don't understand what's going on here.

[ICarryTheDustOfAJourney]

I don't understand what's going on here.

...welcome to my club ;)

I think it inherits an implicit property change from somewhere.
Probably correct behaviour, all browsers show the effect.

---

...after taking a closer look at the scale control:

May be consider removing the hardly visible but rather expensive box & text shadow effect on mobiles?

Edit:
and the transparencies. The control is on mobiles mostly hidden behind the semi-transparent attribution div.
Imagine the ROPs required here. I would trade in matter-of-taste eyecandy for more snappiness .

The class is .leaflet-control-scale-line and .leaflet-control-scale-line:not(:first-child)

just a thought.

[mourner]

All right, improved mobile styles significantly, fixed the border alpha, and remove text shadow.