fix: eliminate alpha blending — use pre-blended solid colors
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 11s
Deploy Internet for Kids / Deploy (push) Successful in 6s
Deploy Internet for Kids / Health Check (push) Successful in 2s
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Deploy Internet for Kids / IndexNow Ping (push) Successful in 8s
Deploy Internet for Kids / Promote to Latest (push) Successful in 2s
Deploy Internet for Kids / Rollback (push) Has been skipped
Deploy Internet for Kids / Audit (push) Successful in 1s
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 11s
Deploy Internet for Kids / Deploy (push) Successful in 6s
Deploy Internet for Kids / Health Check (push) Successful in 2s
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Deploy Internet for Kids / IndexNow Ping (push) Successful in 8s
Deploy Internet for Kids / Promote to Latest (push) Successful in 2s
Deploy Internet for Kids / Rollback (push) Has been skipped
Deploy Internet for Kids / Audit (push) Successful in 1s
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:
@@ -40,10 +40,10 @@
|
|||||||
<div class="ifk-map-popup" id="ifk-map-popup"><button class="popup-close" id="ifk-popup-close">×</button><div id="ifk-popup-content"></div></div>
|
<div class="ifk-map-popup" id="ifk-map-popup"><button class="popup-close" id="ifk-popup-close">×</button><div id="ifk-popup-content"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ifk-map-legend">
|
<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:#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:#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:#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:#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:#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:#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:#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 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>
|
||||||
</div>
|
</div>
|
||||||
@@ -52,7 +52,8 @@
|
|||||||
<script>
|
<script>
|
||||||
(function() {
|
(function() {
|
||||||
var LANG = "{{ $lang }}";
|
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 = {
|
var STATUS_LABELS = {
|
||||||
en: { enforced: 'Enforced', passed: 'Passed', progress: 'In Progress', guidelines: 'Guidelines' },
|
en: { enforced: 'Enforced', passed: 'Passed', progress: 'In Progress', guidelines: 'Guidelines' },
|
||||||
de: { enforced: 'In Kraft', passed: 'Verabschiedet', progress: 'In Bearbeitung', guidelines: 'Richtlinien' },
|
de: { enforced: 'In Kraft', passed: 'Verabschiedet', progress: 'In Bearbeitung', guidelines: 'Richtlinien' },
|
||||||
@@ -117,18 +118,10 @@
|
|||||||
geoData.features.forEach(function(f) {
|
geoData.features.forEach(function(f) {
|
||||||
var id = String(f.id).padStart(3, '0');
|
var id = String(f.id).padStart(3, '0');
|
||||||
var c = byIsoNum[id];
|
var c = byIsoNum[id];
|
||||||
if (c) {
|
ctx.fillStyle = c ? STATUS_COLORS[c.status] : '#ffffff';
|
||||||
ctx.globalAlpha = 0.65;
|
|
||||||
ctx.fillStyle = STATUS_COLORS[c.status];
|
|
||||||
} else {
|
|
||||||
ctx.globalAlpha = 1;
|
|
||||||
ctx.fillStyle = '#ffffff';
|
|
||||||
}
|
|
||||||
drawGeometry(ctx, f.geometry, sx, sy, true);
|
drawGeometry(ctx, f.geometry, sx, sy, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
ctx.globalAlpha = 1;
|
|
||||||
|
|
||||||
// Draw borders
|
// Draw borders
|
||||||
ctx.strokeStyle = '#94a3b8';
|
ctx.strokeStyle = '#94a3b8';
|
||||||
ctx.lineWidth = 0.5 * sx / (cw / vb.w);
|
ctx.lineWidth = 0.5 * sx / (cw / vb.w);
|
||||||
@@ -175,7 +168,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Load data
|
// Load data
|
||||||
fetch('{{ "data/countries-110m.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) {
|
||||||
var geo = topojson.feature(topo, topo.objects.countries);
|
var geo = topojson.feature(topo, topo.objects.countries);
|
||||||
@@ -194,16 +187,6 @@
|
|||||||
|
|
||||||
sizeCanvas();
|
sizeCanvas();
|
||||||
drawMap();
|
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
|
// Resize handler
|
||||||
|
|||||||
Reference in New Issue
Block a user