fix: reduce page transition lag on Android (closes #48)
Two causes of ~1s navigation delay fixed: 1. glass.css Section 19 was extending the page-in animation from 0.20s to 0.30s using spring easing. Reverted to 0.20s in / 0.12s out. 2. During transitions, dozens of backdrop-filter layers (widgets, cards, inputs, toolbars) were composited simultaneously for both the outgoing and incoming page, overloading mid-range Android GPUs. Added html.navigating class: router.js sets it at transition start, glass.css overrides all app-content backdrop-filters to none while active, animationend removes it once the in-animation completes.
This commit is contained in:
@@ -239,6 +239,10 @@ async function renderPage(route, previousPath = null) {
|
||||
const outClass = direction === 'right' ? 'page-transition--out-left' : 'page-transition--out-right';
|
||||
const inClass = direction === 'right' ? 'page-transition--in-right' : 'page-transition--in-left';
|
||||
|
||||
// Performance: backdrop-filter während Übergang deaktivieren (Android-Optimierung).
|
||||
// glass.css setzt alle backdrop-filter im app-content auf none solange diese Klasse aktiv ist.
|
||||
document.documentElement.classList.add('navigating');
|
||||
|
||||
// Alte Seite kurz ausfaden, falls vorhanden
|
||||
const oldPage = content.querySelector('.page-transition');
|
||||
if (oldPage) {
|
||||
@@ -259,7 +263,18 @@ async function renderPage(route, previousPath = null) {
|
||||
pageWrapper.style.opacity = '';
|
||||
pageWrapper.classList.add(inClass);
|
||||
|
||||
// navigating-Klasse nach Ende der Einblend-Animation entfernen.
|
||||
// Fallback-Timeout falls animationend nicht feuert (z.B. prefers-reduced-motion).
|
||||
const navEndTimeout = setTimeout(() => {
|
||||
document.documentElement.classList.remove('navigating');
|
||||
}, 300);
|
||||
pageWrapper.addEventListener('animationend', () => {
|
||||
clearTimeout(navEndTimeout);
|
||||
document.documentElement.classList.remove('navigating');
|
||||
}, { once: true });
|
||||
|
||||
} catch (err) {
|
||||
document.documentElement.classList.remove('navigating');
|
||||
console.error('[Router] Seiten-Render-Fehler:', err);
|
||||
renderError(app, err);
|
||||
}
|
||||
|
||||
+13
-2
@@ -400,16 +400,27 @@ textarea.form-input {
|
||||
* ================================================================ */
|
||||
.page-transition--in-right,
|
||||
.page-transition--in-left {
|
||||
animation-duration: 0.30s;
|
||||
animation-duration: 0.20s;
|
||||
animation-timing-function: var(--ease-glass);
|
||||
}
|
||||
|
||||
.page-transition--out-left,
|
||||
.page-transition--out-right {
|
||||
animation-duration: 0.14s;
|
||||
animation-duration: 0.12s;
|
||||
animation-timing-function: var(--ease-out);
|
||||
}
|
||||
|
||||
/* Performance: backdrop-filter deaktivieren während Seitenübergängen.
|
||||
* Auf Android verursachen viele gleichzeitige backdrop-filter-Layer
|
||||
* (Widgets, Cards, Inputs) hohen GPU-Aufwand → Transition wirkt träge.
|
||||
* html.navigating wird von router.js für die Dauer des Übergangs gesetzt. */
|
||||
html.navigating .app-content *,
|
||||
html.navigating .app-content *::before,
|
||||
html.navigating .app-content *::after {
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
* 20. List-Stagger — Spring Timing
|
||||
* ================================================================ */
|
||||
|
||||
Reference in New Issue
Block a user