Remover o contorno do controle de zoom do folheto (?) - css, folheto, dispositivos móveis

Em todos os navegadores em todos os dispositivos móveis,tentei, meus botões de controle de zoom têm um contorno cinza claro que não aparece em navegadores de desktop. Eu tentei um monte de css para se livrar dele, mas nada funciona. Alguém sabe como removê-lo?

Este é o meu CSS para os controles, que faz tudo que eu preciso em navegadores de desktop, mas não remove esse tipo de coisa em dispositivos móveis:

.leaflet-control-container {
box-shadow: none !important;
outline: 0 !important;
}

.leaflet-bar {
box-shadow: none;
}

.leaflet-bar a, .leaflet-bar a:hover {
background-color: #f0b034;
border: 1px solid #065428;
}

.leaflet-bar a:first-child, .leaflet-bar a:last-child {
border-radius: 0;
border-bottom: 1px solid #065428;
}

Esta é a página ao vivo que eu uso atualmente para testes: clique

Respostas:

No navegador de desktop, há é uma sombra ao redor do controle de zoom. É definido por .leaflet-bar classe (ver Folheto de linha CSS 209).

.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

Para dispositivos de toque (móveis), essa definição é sobreposta por .leaflet-touch .leaflet-bar classe (ver linha 380).

.leaflet-touch .leaflet-bar {
box-shadow: none;
}

.leaflet-touch .leaflet-bar {
border: 2px solid rgba(0,0,0,0.2);
}

Você deve poder removê-lo, substituindo este border propriedade em seu CSS.

.leaflet-touch .leaflet-bar {
border: none;
}

Demonstração: http://jsfiddle.net/ve2huzxw/37/