From 95d90d6785ac51cf3a2a11987293d260e2088ca5 Mon Sep 17 00:00:00 2001 From: John Arban Lewis Date: Thu, 30 May 2024 09:17:48 -0400 Subject: [PATCH] make pixels crispy --- src/TempoLite.vue | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/TempoLite.vue b/src/TempoLite.vue index 69e60d7..9fb6817 100644 --- a/src/TempoLite.vue +++ b/src/TempoLite.vue @@ -1639,4 +1639,23 @@ a { i.mdi-menu-down { color: var(--smithsonian-blue); } + +/* Leaflet crispness override */ +// @JobLeonard - https://github.com/Leaflet/Leaflet/issues/5883#issue-269071844 +// .leaflet-container .leaflet-overlay-pane svg, +// .leaflet-container .leaflet-marker-pane img, +// .leaflet-container .leaflet-shadow-pane img, +// .leaflet-container .leaflet-tile-pane img, +.leaflet-container img.leaflet-image-layer { + max-width: none !important; + /* Preserve crisp pixels with scaled up images */ + image-rendering: optimizeSpeed; /* Legal fallback */ + image-rendering: -moz-crisp-edges; /* Firefox */ + image-rendering: -o-crisp-edges; /* Opera */ + image-rendering: -webkit-optimize-contrast; /* Safari */ + image-rendering: optimize-contrast; /* CSS3 Proposed */ + image-rendering: crisp-edges; /* CSS4 Proposed */ + image-rendering: pixelated; /* CSS4 Proposed */ + -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ +}