From 64c4a51b46c361a57012c20d3e1c9cdc7bff224c Mon Sep 17 00:00:00 2001
From: Christian Gick <service@agiliton.eu>
Date: Sat, 4 Apr 2026 13:09:46 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20eliminate=20alpha=20blending=20=E2=80=94?=
 =?UTF-8?q?=20use=20pre-blended=20solid=20colors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The root cause of horizontal lines: globalAlpha 0.65 on country fills
creates visible seams where adjacent polygons don't perfectly overlap.
Sub-pixel gaps between polygons allow the white land fill to show
through at different brightness than the semi-transparent overlay.

Fix: pre-blend all status colors with white at 0.65 opacity and draw
at full opacity (globalAlpha=1). No alpha = no blending artifacts.

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

diff --git a/layouts/shortcodes/world-map.html b/layouts/shortcodes/world-map.html
index d4c1fd3..ba4a052 100644
--- a/layouts/shortcodes/world-map.html
+++ b/layouts/shortcodes/world-map.html
@@ -40,10 +40,10 @@
     <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>
-    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#a5b4fc"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
-    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#e0e7ff"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
+    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#9cabf1"></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:#a68ac3"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
+    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#c5cefd"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
+    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#ebefff"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
     <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#e2e8f0"></div>{{ if eq $lang "de" }}Keine Daten{{ else if eq $lang "fr" }}Pas de données{{ else }}No Data{{ end }}</div>
   </div>
 </div>
@@ -52,7 +52,8 @@
 <script>
 (function() {
   var LANG = "{{ $lang }}";
-  var STATUS_COLORS = { enforced: '#667eea', passed: '#764ba2', progress: '#a5b4fc', guidelines: '#e0e7ff' };
+  // Pre-blended with white at 0.65 opacity — no alpha = no seams between adjacent polygons
+  var STATUS_COLORS = { enforced: '#9cabf1', passed: '#a68ac3', progress: '#c5cefd', guidelines: '#ebefff' };
   var STATUS_LABELS = {
     en: { enforced: 'Enforced', passed: 'Passed', progress: 'In Progress', guidelines: 'Guidelines' },
     de: { enforced: 'In Kraft', passed: 'Verabschiedet', progress: 'In Bearbeitung', guidelines: 'Richtlinien' },
@@ -117,18 +118,10 @@
     geoData.features.forEach(function(f) {
       var id = String(f.id).padStart(3, '0');
       var c = byIsoNum[id];
-      if (c) {
-        ctx.globalAlpha = 0.65;
-        ctx.fillStyle = STATUS_COLORS[c.status];
-      } else {
-        ctx.globalAlpha = 1;
-        ctx.fillStyle = '#ffffff';
-      }
+      ctx.fillStyle = c ? STATUS_COLORS[c.status] : '#ffffff';
       drawGeometry(ctx, f.geometry, sx, sy, true);
     });
 
-    ctx.globalAlpha = 1;
-
     // Draw borders
     ctx.strokeStyle = '#94a3b8';
     ctx.lineWidth = 0.5 * sx / (cw / vb.w);
@@ -175,7 +168,7 @@
   }
 
   // Load data
-  fetch('{{ "data/countries-110m.json" | relURL }}')
+  fetch('{{ "data/countries-50m.json" | relURL }}')
     .then(function(r) { return r.json(); })
     .then(function(topo) {
       var geo = topojson.feature(topo, topo.objects.countries);
@@ -194,16 +187,6 @@
 
       sizeCanvas();
       drawMap();
-      // Convert canvas to static <img> to bypass GPU compositor tiling
-      setTimeout(function() {
-        var imgEl = document.createElement('img');
-        imgEl.src = canvas.toDataURL('image/png');
-        imgEl.id = 'ifk-map-img';
-        imgEl.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;display:block;';
-        container.appendChild(imgEl);
-        canvas.style.opacity = '0';
-        canvas.style.position = 'absolute';
-      }, 100);
     });
 
   // Resize handler