From b9a62902c218effaeda9b399862b24b336a25434 Mon Sep 17 00:00:00 2001 From: Christian Gick Date: Sat, 4 Apr 2026 09:03:56 +0300 Subject: [PATCH] fix: render ocean as SVG rectangle to prevent GPU compositing seams CSS background bleeds through Leaflet transform3d layer boundaries on retina Macs causing horizontal lines. Move ocean color into SVG layer so it composites with countries. Add backface-visibility: hidden. Co-Authored-By: Claude Opus 4.6 (1M context) --- layouts/shortcodes/world-map.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/layouts/shortcodes/world-map.html b/layouts/shortcodes/world-map.html index ef3dbf3..cfabdcc 100644 --- a/layouts/shortcodes/world-map.html +++ b/layouts/shortcodes/world-map.html @@ -6,7 +6,8 @@ .ifk-map-wrap { max-width: 100%; margin: 2rem 0; } .ifk-map-wrap h3 { text-align: center; margin-bottom: 0.5rem; font-size: 1.25rem; } .ifk-map-subtitle { text-align: center; color: #666; font-size: 0.85rem; margin-bottom: 1rem; } -#ifk-world-map { width: 100%; height: 420px; border-radius: 8px; background: #c8d3df; } +#ifk-world-map { width: 100%; height: 420px; border-radius: 8px; background: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden; } +#ifk-world-map .leaflet-map-pane, #ifk-world-map .leaflet-overlay-pane { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .ifk-map-legend { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1rem; font-size: 0.8rem; @@ -110,6 +111,11 @@ if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) layer.bringToFront(); } + // Ocean as SVG rectangle — same compositing layer as countries, prevents GPU seams + L.rectangle([[-90, -180], [90, 180]], { + fillColor: '#c8d3df', fillOpacity: 1, stroke: false, interactive: false + }).addTo(map); + fetch('{{ "data/countries-50m.json" | relURL }}') .then(function(r) { return r.json(); }) .then(function(topo) {