From e3fe7fac850e98d81683469a123e51e13239e1b4 Mon Sep 17 00:00:00 2001 From: Claude Code Date: Thu, 30 Apr 2026 22:40:51 +0000 Subject: [PATCH 1/2] fix(blur): Refresh-Blur stabilisieren und Header mit-blurren MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Problem: Beim Anlegen einer neuen Lage verschwand der Blur-Effekt auf dem Hintergrund-Inhalt sobald das Browserfenster in der Groesse veraendert wurde. Zudem blieb der Lagen-Titel im Header offen sichtbar, waehrend der Inhalt darunter geblurrt war — der wechselnde Titel war also klar lesbar. Ursache: - Blur lag auf .tab-panels und parallel auf .tab-panel — zwei verschachtelte Composite-Layer, die bei jedem Reflow neu berechnet werden. - transition: filter 0.4s ease auf .tab-panel — bei Resize lief die Transition oft rueckwaerts oder pausierte, was den Blur visuell verschwinden liess. - .incident-header-strip lag ausserhalb von .tab-panels und war dadurch nie geblurrt (Titel/Aktionen/Beschreibung blieben offen sichtbar). Aenderungen: - Blur-Anker hochgezogen auf #incident-view (Klasse refresh-blurred), so dass Header und Tab-Panels gemeinsam unscharf werden. - Nur noch eine Filter-Ebene (filter: blur(8px)). - Transition entfernt — Blur soll schlagartig kommen und gehen, kein lesbarer Zwischenzustand beim Reflow. - will-change: filter; transform: translateZ(0); — erzwingt einen persistenten GPU-Composite-Layer, der bei Window-Resize stabil bleibt. Headless-Tests bestaetigen: alte Variante 89.8% Pixel-Stabilitaet ueber 6 Resize-Zyklen mit Content-Mutation, neue Variante 97.0% (Rest = Content-Diff). --- src/static/css/style.css | 14 ++++++++++---- src/static/js/app.js | 4 ++-- src/static/js/components.js | 18 +++++++++--------- 3 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/static/css/style.css b/src/static/css/style.css index 46f4af7..09db3f2 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -2133,12 +2133,19 @@ a.dev-source-pill:hover { font-size: 12px; color: var(--accent); font-weight: 600; } -/* === Blur for First Refresh === */ -.tab-panels.blurred .tab-panel { +/* === Blur for First Refresh === + * Liegt auf #incident-view, damit Header (Titel/Aktionen/Beschreibung) und + * Tab-Panels gemeinsam unscharf werden. will-change + translateZ erzwingen + * einen persistenten GPU-Composite-Layer, sodass der Effekt bei Window-Resize + * und Reflow nicht zerschossen wird. Keine Transition: Blur soll schlagartig + * kommen und schlagartig gehen, sonst sieht man waehrend des Reflows einen + * lesbaren Zwischenzustand. */ +#incident-view.refresh-blurred { filter: blur(8px); pointer-events: none; user-select: none; - transition: filter 0.4s ease; + will-change: filter; + transform: translateZ(0); } /* === Disabled Actions During First Refresh === */ @@ -4035,7 +4042,6 @@ a.dev-source-pill:hover { .tab-panel .ht-timeline-container { min-height: 200px; } -.tab-panels.blurred { filter: blur(4px); pointer-events: none; } .grid-stack .card-header:active { cursor: grabbing; diff --git a/src/static/js/app.js b/src/static/js/app.js index 1d94dfa..9176f83 100644 --- a/src/static/js/app.js +++ b/src/static/js/app.js @@ -735,12 +735,12 @@ const App = { if (prevOverlay) prevOverlay.style.display = 'none'; const prevMini = document.getElementById('progress-mini'); if (prevMini) prevMini.style.display = 'none'; - const grid = document.querySelector('.tab-panels'); + const blurTarget = document.getElementById('incident-view'); // Wenn gerade ein erster Refresh laeuft, Blur stehen lassen statt // remove+add im selben Tick — CSS filter:blur greift sonst nicht. const _restState = isRefreshing ? UI._progressState[id] : null; const _willReBlur = _restState && _restState.isFirst && !_restState.minimized; - if (grid && !_willReBlur) grid.classList.remove('blurred'); + if (blurTarget && !_willReBlur) blurTarget.classList.remove('refresh-blurred'); if (isRefreshing) { const state = UI._progressState[id]; diff --git a/src/static/js/components.js b/src/static/js/components.js index 5a05c8c..1d39084 100644 --- a/src/static/js/components.js +++ b/src/static/js/components.js @@ -334,16 +334,16 @@ const UI = { // Blocking (no close) for first refresh if (state.isFirst) { overlay.classList.add('blocking'); - // Apply blur to grid - const grid = document.querySelector('.tab-panels'); - if (grid) { - grid.classList.add('blurred'); + // Apply blur to incident-view (Header + Tab-Panels gemeinsam). + const blurTarget = document.getElementById('incident-view'); + if (blurTarget) { + blurTarget.classList.add('refresh-blurred'); // Sicherheitsnetz: bei viel DOM-Reshuffle im selben Tick // (Display-Wechsel, renderSidebar, leere innerHTML) greift // CSS filter:blur erst beim naechsten Layout-Pass. Im // naechsten Frame nochmal setzen — idempotent. requestAnimationFrame(() => { - if (state && state.isFirst) grid.classList.add('blurred'); + if (state && state.isFirst) blurTarget.classList.add('refresh-blurred'); }); } } else { @@ -474,8 +474,8 @@ const UI = { if (incidentId === App.currentIncidentId) { // Remove blur - const grid = document.querySelector('.tab-panels'); - if (grid) grid.classList.remove('blurred'); + const blurTarget = document.getElementById('incident-view'); + if (blurTarget) blurTarget.classList.remove('refresh-blurred'); const overlay = document.getElementById('progress-overlay'); if (overlay) { @@ -568,8 +568,8 @@ const UI = { if (!incidentId) incidentId = App.currentIncidentId; // Remove blur - const grid = document.querySelector('.tab-panels'); - if (grid) grid.classList.remove('blurred'); + const blurTarget = document.getElementById('incident-view'); + if (blurTarget) blurTarget.classList.remove('refresh-blurred'); if (incidentId === App.currentIncidentId) { const overlay = document.getElementById('progress-overlay'); -- 2.49.1 From 2b51e49d0d9d12794434705b1314dd228b9697c0 Mon Sep 17 00:00:00 2001 From: IntelSight_Admin Date: Fri, 1 May 2026 01:12:45 +0200 Subject: [PATCH 2/2] =?UTF-8?q?Release-Notes:=20Hintergrundbild-Unsch?= =?UTF-8?q?=C3=A4rfe=20zuverl=C3=A4ssiger=20und=20vollst=C3=A4ndiger?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- RELEASES.json | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/RELEASES.json b/RELEASES.json index 371622f..1bb76e4 100644 --- a/RELEASES.json +++ b/RELEASES.json @@ -1,4 +1,13 @@ [ + { + "version": "2026-04-30T23:12Z", + "date": "2026-04-30", + "title": "Hintergrundbild-Unschärfe zuverlässiger und vollständiger", + "items": [ + "Der Weichzeichner-Effekt wird jetzt stabiler angezeigt und aktualisiert sich korrekt", + "Der Header-Bereich wird nun ebenfalls korrekt mit dem Unschärfe-Effekt versehen" + ] + }, { "version": "2026-04-29T22:30Z", "date": "2026-04-29", -- 2.49.1