Merge pull request #47 from johnarban/crispy-pixels

make pixels crispy
cosmicds · May 30, 2024 · df7f5f9 · df7f5f9
2 parents e3e3cb7 + 95d90d6
commit df7f5f9
Showing 1 changed file with 19 additions and 0 deletions.
diff --git a/src/TempoLite.vue b/src/TempoLite.vue
@@ -1648,4 +1648,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+           */
+}
 </style>