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

fix: render ocean as SVG rectangle to prevent GPU compositing seams
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 13s
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 7s
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 
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) <noreply@anthropic.com>
This commit is contained in:
Christian Gick
2026-04-04 09:03:56 +03:00
parent 578b95ff9e
commit b9a62902c2
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,8 @@
.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-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 { .ifk-map-legend {
display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
margin-top: 1rem; font-size: 0.8rem; margin-top: 1rem; font-size: 0.8rem;
@@ -110,6 +111,11 @@
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) layer.bringToFront(); 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 }}') fetch('{{ "data/countries-50m.json" | relURL }}')
.then(function(r) { return r.json(); }) .then(function(r) { return r.json(); })
.then(function(topo) { .then(function(topo) {