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

fix: eliminate alpha blending — use pre-blended solid colors
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 11s
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 1s
Details

Browse Source 
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>
This commit is contained in:
Christian Gick
2026-04-04 13:09:46 +03:00
parent a0fb62aa66
commit 64c4a51b46
1 changed files with 8 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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