Зніміть контур управління збільшенням листівки (?) - css, листівка, мобільні пристрої

У кожному браузері на кожному мобільному пристрої я знаходжусьспробував, у моїх кнопок регулювання масштабування є світло-сірий контур, який не відображається на веб-переглядачах. Я намагався багато css, щоб позбутися від нього, але нічого не працює. Хтось знає, як його видалити?

Це мій CSS для елементів керування, який робить усе, що мені потрібно в браузерах настільних ПК, але не видаляє цей начерк на мобільних пристроях:

.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;
}

Це реальна сторінка, яку я зараз використовую для тестування: клацніть

Відповіді:

У настільному браузері є є тінь навколо регулювання масштабу. Вона визначається за допомогою .leaflet-bar клас (див Листовка CSS рядок 209)

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

Для сенсорних (мобільних) пристроїв це визначення замінено .leaflet-touch .leaflet-bar клас (див рядок 380)

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

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

Ви маєте змогу видалити його, відмінивши це border власності у вашій CSS.

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

Демо: http://jsfiddle.net/ve2huzxw/37/