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:
@@ -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];
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren