From 65b2c757a43eeb66c28812c1a249faff8aeaba98 Mon Sep 17 00:00:00 2001 From: Christian Gick Date: Sat, 4 Apr 2026 10:01:36 +0300 Subject: [PATCH] fix: contain strict + land base fill to prevent GPU tile seams contain: strict forces single compositing unit. Land base fill covers polar gaps between country polygons. Co-Authored-By: Claude Opus 4.6 (1M context) --- layouts/shortcodes/world-map.html | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/layouts/shortcodes/world-map.html b/layouts/shortcodes/world-map.html index 1a67a44..28a1146 100644 --- a/layouts/shortcodes/world-map.html +++ b/layouts/shortcodes/world-map.html @@ -5,7 +5,7 @@ .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-map-container { position: relative; width: 100%; height: 420px; border-radius: 8px; overflow: hidden; background: #c8d3df; } +.ifk-map-container { position: relative; width: 100%; height: 420px; border-radius: 8px; overflow: hidden; background: #c8d3df; contain: strict; isolation: isolate; will-change: contents; } .ifk-map-svg { width: 100%; height: 100%; display: block; cursor: grab; shape-rendering: crispEdges; } .ifk-map-svg:active { cursor: grabbing; } .ifk-map-svg .country { stroke: #94a3b8; stroke-width: 0.3; transition: stroke-width 0.15s; } @@ -117,6 +117,15 @@ var geo = topojson.feature(topo, topo.objects.countries); var borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; }); + // Land base fill (covers gaps at poles between country polygons) + var land = topojson.feature(topo, topo.objects.land); + var landPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + landPath.setAttribute('d', projectGeometry(land.features ? land.features[0].geometry : land.geometry)); + landPath.setAttribute('fill', '#ffffff'); + landPath.setAttribute('stroke', 'none'); + landPath.setAttribute('pointer-events', 'none'); + svg.appendChild(landPath); + // Country fills (ocean is CSS background on container) geo.features.forEach(function(f) { var id = String(f.id).padStart(3, '0');