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