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

fix: add shape-rendering crispEdges to prevent GPU tile seams in SVG
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 14s
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 
WebKit tiles large SVG elements for GPU rendering. Anti-aliasing at
tile boundaries creates different sub-pixel values on each side.
crispEdges disables anti-aliasing so both sides render identically.

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

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

@@ -5,8 +5,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-map-container { position: relative; width: 100%; height: 420px; border-radius: 8px; overflow: hidden; background: #fff; }
.ifk-map-svg { width: 100%; height: 100%; display: block; cursor: grab; }
.ifk-map-container { position: relative; width: 100%; height: 420px; border-radius: 8px; overflow: hidden; background: #c8d3df; }
.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; }
.ifk-map-svg .country.has-data:hover { stroke: #667eea; stroke-width: 1.2; cursor: pointer; }
@@ -33,7 +33,7 @@
<h3>{{ if eq $lang "de" }}Interaktive Weltkarte: Kinderschutzgesetze{{ else if eq $lang "fr" }}Carte interactive : lois de protection de l'enfance{{ else }}Interactive Map: Child Protection Laws{{ end }}</h3>
<p class="ifk-map-subtitle">{{ if eq $lang "de" }}Klicken Sie auf ein Land für Details{{ else if eq $lang "fr" }}Cliquez sur un pays pour plus de détails{{ else }}Click a country for details{{ end }}</p>
<div class="ifk-map-container" id="ifk-map-container">
<svg class="ifk-map-svg" id="ifk-map-svg" xmlns="http://www.w3.org/2000/svg"></svg>
<svg class="ifk-map-svg" id="ifk-map-svg" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"></svg>
<div class="ifk-map-controls">
<button id="ifk-zoom-in" title="Zoom in">+</button>
<button id="ifk-zoom-out" title="Zoom out">&minus;</button>
@@ -117,14 +117,7 @@
var geo = topojson.feature(topo, topo.objects.countries);
var borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; });
// Ocean background
var ocean = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
ocean.setAttribute('width', W);
ocean.setAttribute('height', H);
ocean.setAttribute('fill', '#c8d3df');
svg.appendChild(ocean);
// Country fills
// Country fills (ocean is CSS background on container)
geo.features.forEach(function(f) {
var id = String(f.id).padStart(3, '0');
var c = byIsoNum[id];