christian/internetforkids
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: contain strict + land base fill to prevent GPU tile seams
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 12s
Details
Deploy Internet for Kids / Deploy (push) Successful in 6s
Details
Deploy Internet for Kids / Health Check (push) Successful in 2s
Details
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Details
Deploy Internet for Kids / IndexNow Ping (push) Successful in 8s
Details
Deploy Internet for Kids / Promote to Latest (push) Successful in 2s
Details
Deploy Internet for Kids / Rollback (push) Has been skipped
Details
Deploy Internet for Kids / Audit (push) Successful in 2s
Details

Browse Source 
contain: strict forces single compositing unit.
Land base fill covers polar gaps between country polygons.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Gick
2026-04-04 10:01:36 +03:00
parent 6a4e8dde05
commit 65b2c757a4
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
layouts/shortcodes/world-map.html
View File

@@ -5,7 +5,7 @@
.ifk-map-wrap { max-width: 100%; margin: 2rem 0; } .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-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-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 { width: 100%; height: 100%; display: block; cursor: grab; shape-rendering: crispEdges; }
.ifk-map-svg:active { cursor: grabbing; } .ifk-map-svg:active { cursor: grabbing; }
.ifk-map-svg .country { stroke: #94a3b8; stroke-width: 0.3; transition: stroke-width 0.15s; } .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 geo = topojson.feature(topo, topo.objects.countries);
var borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; }); 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) // Country fills (ocean is CSS background on container)
geo.features.forEach(function(f) { geo.features.forEach(function(f) {
var id = String(f.id).padStart(3, '0'); var id = String(f.id).padStart(3, '0');