fix(blur): Refresh-Blur stabilisieren und Header mit-blurren

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).
Dieser Commit ist enthalten in:
Claude Code
2026-04-30 22:40:51 +00:00
Ursprung 88b18d0775
Commit e3fe7fac85
3 geänderte Dateien mit 21 neuen und 15 gelöschten Zeilen

Datei anzeigen

@@ -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');