From df2cb09a056ddc984b9d230c9e6b91acee50ffa2 Mon Sep 17 00:00:00 2001
From: Christian Gick <service@agiliton.eu>
Date: Sat, 4 Apr 2026 09:50:05 +0300
Subject: [PATCH] fix: replace Leaflet with pure SVG map to eliminate WebKit
 GPU seams

WebKit Bug #156130 causes 1px gaps at translate3d boundaries on retina
displays. Both Leaflet and MapLibre use translate3d internally, making
the artifact unfixable from app code. Pure SVG with viewBox zoom/pan
has no translate3d, no tiling, no GPU compositor layers = no seams.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 layouts/shortcodes/world-map.html | 303 +++++++++++++++++++-----------
 1 file changed, 192 insertions(+), 111 deletions(-)

diff --git a/layouts/shortcodes/world-map.html b/layouts/shortcodes/world-map.html
index 7cddbba..7c28a38 100644
--- a/layouts/shortcodes/world-map.html
+++ b/layouts/shortcodes/world-map.html
@@ -1,31 +1,46 @@
 {{ $lang := .Page.Language.Lang }}
 {{ $countries := hugo.Data.countries }}
 
-<link rel="stylesheet" href="{{ "css/leaflet.min.css" | relURL }}" />
 <style>
 .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: #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-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-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; }
+.ifk-map-controls { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 10; }
+.ifk-map-controls button { width: 30px; height: 30px; background: #fff; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #333; }
+.ifk-map-controls button:hover { background: #f0f0f0; }
+.ifk-map-popup { position: absolute; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.15); padding: 0.75rem; font-size: 0.85rem; max-width: 280px; line-height: 1.4; z-index: 20; pointer-events: auto; display: none; }
+.ifk-map-popup .popup-close { position: absolute; top: 4px; right: 8px; background: none; border: none; font-size: 16px; cursor: pointer; color: #999; }
+.ifk-popup-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 600; font-size: 0.8rem; color: white; margin: 0.3rem 0; }
+.ifk-popup-age { display: flex; align-items: center; gap: 0.35rem; margin: 0.3rem 0; font-size: 0.8rem; color: #555; }
+.ifk-popup-detail { margin: 0.4rem 0; font-size: 0.82rem; color: #444; }
+.ifk-popup-link { display: inline-block; margin-top: 0.4rem; font-size: 0.8rem; color: #667eea; text-decoration: none; font-weight: 600; }
+.ifk-popup-link:hover { text-decoration: underline; }
 .ifk-map-legend {
   display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
   margin-top: 1rem; font-size: 0.8rem;
 }
 .ifk-map-legend-item { display: flex; align-items: center; gap: 0.35rem; }
 .ifk-map-legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
-.ifk-popup-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 600; font-size: 0.8rem; color: white; margin: 0.3rem 0; }
-.ifk-popup-age { display: flex; align-items: center; gap: 0.35rem; margin: 0.3rem 0; font-size: 0.8rem; color: #555; }
-.ifk-popup-detail { margin: 0.4rem 0; font-size: 0.82rem; color: #444; }
-.ifk-popup-link { display: inline-block; margin-top: 0.4rem; font-size: 0.8rem; color: #667eea; text-decoration: none; font-weight: 600; }
-.ifk-popup-link:hover { text-decoration: underline; }
-@media (max-width: 640px) { #ifk-world-map { height: 280px; } }
+@media (max-width: 640px) { .ifk-map-container { height: 280px; } }
 </style>
 
 <div class="ifk-map-wrap">
   <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 id="ifk-world-map"></div>
+  <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>
+    <div class="ifk-map-controls">
+      <button id="ifk-zoom-in" title="Zoom in">+</button>
+      <button id="ifk-zoom-out" title="Zoom out">&minus;</button>
+      <button id="ifk-zoom-reset" title="Reset"><svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 9H0v5h5v-2H2V9zm0-4h3V3H2V0H0v5zm10 7H9v2h5V9h-2v3zM9 0v2h3v3h2V0H9z" fill="currentColor"/></svg></button>
+    </div>
+    <div class="ifk-map-popup" id="ifk-map-popup"><button class="popup-close" id="ifk-popup-close">&times;</button><div id="ifk-popup-content"></div></div>
+  </div>
   <div class="ifk-map-legend">
     <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#667eea"></div>{{ if eq $lang "de" }}In Kraft{{ else if eq $lang "fr" }}En vigueur{{ else }}Enforced{{ end }}</div>
     <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#764ba2"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
@@ -35,7 +50,6 @@
   </div>
 </div>
 
-<script src="{{ "js/leaflet.min.js" | relURL }}"></script>
 <script src="{{ "js/topojson-client.min.js" | relURL }}"></script>
 <script>
 (function() {
@@ -46,126 +60,193 @@
     de: { enforced: 'In Kraft', passed: 'Verabschiedet', progress: 'In Bearbeitung', guidelines: 'Richtlinien' },
     fr: { enforced: 'En vigueur', passed: 'Adopté', progress: 'En cours', guidelines: 'Directives' }
   };
-  var AGE_LABELS = { en: 'Min. social media age', de: 'Min. Social-Media-Alter', fr: 'Âge min. réseaux sociaux' };
-  var ARTICLE_ANCHORS = {
-    AUS: 'australia', DEU: 'germany', USA: 'the-united-states',
-    FRA: 'france', BRA: 'brazil'
-  };
-  if (LANG === 'de') {
-    ARTICLE_ANCHORS.AUS = 'australien';
-    ARTICLE_ANCHORS.USA = 'die-vereinigten-staaten';
-    ARTICLE_ANCHORS.DEU = 'deutschland';
-    ARTICLE_ANCHORS.BRA = 'brasilien';
-  }
+  var AGE_LABELS = { en: 'Min. social media age', de: 'Min. Social-Media-Alter', fr: '\u00c2ge min. r\u00e9seaux sociaux' };
+  var ARTICLE_ANCHORS = { AUS: 'australia', DEU: 'germany', USA: 'the-united-states', FRA: 'france', BRA: 'brazil' };
+  if (LANG === 'de') { ARTICLE_ANCHORS.AUS = 'australien'; ARTICLE_ANCHORS.USA = 'die-vereinigten-staaten'; ARTICLE_ANCHORS.DEU = 'deutschland'; ARTICLE_ANCHORS.BRA = 'brasilien'; }
 
   var countries = {{ $countries | jsonify | safeJS }};
   var byIsoNum = {};
   countries.forEach(function(c) { byIsoNum[c.isoNum] = c; });
 
-  var canvasRenderer = L.canvas({ padding: 1.0 });
-  var map = L.map('ifk-world-map', {
-    center: [20, 20],
-    zoom: 2,
-    minZoom: 2,
-    maxZoom: 6,
-    scrollWheelZoom: false,
-    attributionControl: false,
-    zoomControl: false,
-    renderer: canvasRenderer,
-    preferCanvas: true
-  });
+  // Map dimensions (Equirectangular projection)
+  var W = 960, H = 480;
+  var svg = document.getElementById('ifk-map-svg');
+  var container = document.getElementById('ifk-map-container');
+  var popup = document.getElementById('ifk-map-popup');
+  var popupContent = document.getElementById('ifk-popup-content');
 
-  L.control.zoom({ position: 'topright' }).addTo(map);
+  // ViewBox state
+  var vb = { x: 0, y: 0, w: W, h: H };
+  var VB_INIT = { x: 0, y: 0, w: W, h: H };
+  var MIN_W = W / 16; // max zoom in
 
-  // Enable scroll zoom in fullscreen
-  document.addEventListener('fullscreenchange', function() {
-    if (document.fullscreenElement) map.scrollWheelZoom.enable();
-    else map.scrollWheelZoom.disable();
-  });
+  function setViewBox() {
+    svg.setAttribute('viewBox', vb.x + ' ' + vb.y + ' ' + vb.w + ' ' + vb.h);
+  }
 
-  // Fullscreen button
-  var FsControl = L.Control.extend({
-    options: { position: 'topright' },
-    onAdd: function() {
-      var btn = L.DomUtil.create('div', 'leaflet-bar');
-      var a = L.DomUtil.create('a', '', btn);
-      a.href = '#'; a.title = 'Fullscreen'; a.setAttribute('role', 'button');
-      a.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 9H0v5h5v-2H2V9zm0-4h3V3H2V0H0v5zm10 7H9v2h5V9h-2v3zM9 0v2h3v3h2V0H9z" fill="currentColor"/></svg>';
-      a.style.cssText = 'display:flex;align-items:center;justify-content:center;width:30px;height:30px;';
-      L.DomEvent.on(a, 'click', function(e) {
-        L.DomEvent.stop(e);
-        var el = document.getElementById('ifk-world-map');
-        if (!document.fullscreenElement) el.requestFullscreen();
-        else document.exitFullscreen();
-      });
-      return btn;
+  // Equirectangular projection
+  function projectCoord(lon, lat) {
+    return [(lon + 180) * (W / 360), (90 - lat) * (H / 180)];
+  }
+
+  function projectRing(ring) {
+    var d = '';
+    for (var i = 0; i < ring.length; i++) {
+      var p = projectCoord(ring[i][0], ring[i][1]);
+      d += (i === 0 ? 'M' : 'L') + p[0].toFixed(1) + ',' + p[1].toFixed(1);
     }
-  });
-  new FsControl().addTo(map);
-
-  var hoveredLayer = null;
-
-  function resetStyle(layer) {
-    layer.setStyle({ weight: 0.5, color: '#94a3b8' });
+    return d + 'Z';
   }
 
-  function highlightStyle(layer) {
-    layer.setStyle({ weight: 2.5, color: '#667eea' });
-    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) layer.bringToFront();
+  function projectGeometry(geom) {
+    var d = '';
+    if (geom.type === 'Polygon') {
+      geom.coordinates.forEach(function(ring) { d += projectRing(ring); });
+    } else if (geom.type === 'MultiPolygon') {
+      geom.coordinates.forEach(function(poly) {
+        poly.forEach(function(ring) { d += projectRing(ring); });
+      });
+    }
+    return d;
   }
 
-  // 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);
-
+  // Build SVG
   fetch('{{ "data/countries-50m.json" | relURL }}')
     .then(function(r) { return r.json(); })
     .then(function(topo) {
       var geo = topojson.feature(topo, topo.objects.countries);
+      var borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; });
 
-      L.geoJSON(geo, {
-        style: function(feature) {
-          var id = String(feature.id).padStart(3, '0');
-          var c = byIsoNum[id];
-          return {
-            fillColor: c ? STATUS_COLORS[c.status] : '#ffffff',
-            fillOpacity: c ? 0.65 : 1,
-            weight: 0.5,
-            color: '#94a3b8'
-          };
-        },
-        onEachFeature: function(feature, layer) {
-          var id = String(feature.id).padStart(3, '0');
-          var c = byIsoNum[id];
-          if (!c) return;
+      // 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);
 
-          layer.on('mouseover', function() {
-            highlightStyle(layer);
-            hoveredLayer = layer;
-          });
-          layer.on('mouseout', function() {
-            resetStyle(layer);
-            hoveredLayer = null;
-          });
-          layer.on('click', function(e) {
-            var loc = c[LANG] || c.en;
-            var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en;
-            var ageLabel = AGE_LABELS[LANG] || AGE_LABELS.en;
-            var html = '<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
-              '<em>' + loc.law + '</em><br>' +
-              '<span class="ifk-popup-status" style="background:' + STATUS_COLORS[c.status] + '">' + labels[c.status] + ' (' + c.year + ')</span>' +
-              '<div class="ifk-popup-age">&#x1F464; ' + ageLabel + ': <strong>' + c.ageLimitSocial + '+</strong></div>' +
-              '<div class="ifk-popup-detail">' + loc.detail + '</div>';
-            var anchor = ARTICLE_ANCHORS[c.iso3];
-            if (anchor) {
-              var readMore = { en: 'Read more &darr;', de: 'Weiterlesen &darr;', fr: 'En savoir plus &darr;' };
-              html += '<a class="ifk-popup-link" href="#' + anchor + '">' + (readMore[LANG] || readMore.en) + '</a>';
-            }
-            L.popup({ maxWidth: 280 }).setLatLng(e.latlng).setContent(html).openOn(map);
-          });
+      // Country fills
+      geo.features.forEach(function(f) {
+        var id = String(f.id).padStart(3, '0');
+        var c = byIsoNum[id];
+        var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        var d = projectGeometry(f.geometry);
+        if (!d) return;
+        path.setAttribute('d', d);
+        path.setAttribute('fill', c ? STATUS_COLORS[c.status] : '#ffffff');
+        path.setAttribute('fill-opacity', c ? '0.65' : '1');
+        path.setAttribute('class', 'country' + (c ? ' has-data' : ''));
+        path.setAttribute('data-iso', id);
+        svg.appendChild(path);
+      });
+
+      // Borders (shared edges only)
+      var bordersD = projectGeometry(borders);
+      if (bordersD) {
+        var borderPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        borderPath.setAttribute('d', bordersD);
+        borderPath.setAttribute('fill', 'none');
+        borderPath.setAttribute('stroke', '#94a3b8');
+        borderPath.setAttribute('stroke-width', '0.3');
+        borderPath.setAttribute('pointer-events', 'none');
+        svg.appendChild(borderPath);
+      }
+
+      setViewBox();
+
+      // Click handler
+      svg.addEventListener('click', function(e) {
+        var target = e.target;
+        if (!target.classList.contains('has-data')) { popup.style.display = 'none'; return; }
+        var id = target.getAttribute('data-iso');
+        var c = byIsoNum[id];
+        if (!c) return;
+
+        var loc = c[LANG] || c.en;
+        var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en;
+        var ageLabel = AGE_LABELS[LANG] || AGE_LABELS.en;
+        var html = '<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
+          '<em>' + loc.law + '</em><br>' +
+          '<span class="ifk-popup-status" style="background:' + STATUS_COLORS[c.status] + '">' + labels[c.status] + ' (' + c.year + ')</span>' +
+          '<div class="ifk-popup-age">\u{1F464} ' + ageLabel + ': <strong>' + c.ageLimitSocial + '+</strong></div>' +
+          '<div class="ifk-popup-detail">' + loc.detail + '</div>';
+        var anchor = ARTICLE_ANCHORS[c.iso3];
+        if (anchor) {
+          var readMore = { en: 'Read more \u2193', de: 'Weiterlesen \u2193', fr: 'En savoir plus \u2193' };
+          html += '<a class="ifk-popup-link" href="#' + anchor + '">' + (readMore[LANG] || readMore.en) + '</a>';
         }
-      }).addTo(map);
+        popupContent.innerHTML = html;
+
+        // Position popup near click
+        var rect = container.getBoundingClientRect();
+        var px = e.clientX - rect.left;
+        var py = e.clientY - rect.top;
+        // Keep popup within container
+        popup.style.display = 'block';
+        var pw = popup.offsetWidth;
+        var ph = popup.offsetHeight;
+        var left = Math.min(px + 10, rect.width - pw - 10);
+        var top = Math.max(py - ph - 10, 10);
+        if (top < 10) top = py + 10;
+        popup.style.left = left + 'px';
+        popup.style.top = top + 'px';
+      });
+
+      // Close popup
+      document.getElementById('ifk-popup-close').addEventListener('click', function(e) {
+        e.stopPropagation();
+        popup.style.display = 'none';
+      });
+
+      // Zoom controls
+      function zoomBy(factor) {
+        var cx = vb.x + vb.w / 2;
+        var cy = vb.y + vb.h / 2;
+        var nw = Math.max(MIN_W, Math.min(VB_INIT.w, vb.w * factor));
+        var nh = nw * (H / W);
+        vb.w = nw; vb.h = nh;
+        vb.x = Math.max(0, Math.min(W - vb.w, cx - vb.w / 2));
+        vb.y = Math.max(0, Math.min(H - vb.h, cy - vb.h / 2));
+        setViewBox();
+      }
+
+      document.getElementById('ifk-zoom-in').addEventListener('click', function() { zoomBy(0.5); });
+      document.getElementById('ifk-zoom-out').addEventListener('click', function() { zoomBy(2); });
+      document.getElementById('ifk-zoom-reset').addEventListener('click', function() {
+        vb.x = VB_INIT.x; vb.y = VB_INIT.y; vb.w = VB_INIT.w; vb.h = VB_INIT.h;
+        setViewBox();
+      });
+
+      // Pan via drag
+      var dragging = false, dragStart = null;
+      svg.addEventListener('mousedown', function(e) {
+        if (e.target.closest('.ifk-map-controls') || e.target.closest('.ifk-map-popup')) return;
+        dragging = true;
+        dragStart = { x: e.clientX, y: e.clientY, vbx: vb.x, vby: vb.y };
+        e.preventDefault();
+      });
+      window.addEventListener('mousemove', function(e) {
+        if (!dragging) return;
+        var scale = vb.w / svg.clientWidth;
+        vb.x = Math.max(0, Math.min(W - vb.w, dragStart.vbx - (e.clientX - dragStart.x) * scale));
+        vb.y = Math.max(0, Math.min(H - vb.h, dragStart.vby - (e.clientY - dragStart.y) * scale));
+        setViewBox();
+      });
+      window.addEventListener('mouseup', function() { dragging = false; });
+
+      // Touch support
+      svg.addEventListener('touchstart', function(e) {
+        if (e.touches.length !== 1) return;
+        dragging = true;
+        dragStart = { x: e.touches[0].clientX, y: e.touches[0].clientY, vbx: vb.x, vby: vb.y };
+      }, { passive: true });
+      svg.addEventListener('touchmove', function(e) {
+        if (!dragging || e.touches.length !== 1) return;
+        var scale = vb.w / svg.clientWidth;
+        vb.x = Math.max(0, Math.min(W - vb.w, dragStart.vbx - (e.touches[0].clientX - dragStart.x) * scale));
+        vb.y = Math.max(0, Math.min(H - vb.h, dragStart.vby - (e.touches[0].clientY - dragStart.y) * scale));
+        setViewBox();
+      }, { passive: true });
+      svg.addEventListener('touchend', function() { dragging = false; }, { passive: true });
     });
 })();
 </script>