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:
Ulas
2026-04-16 13:50:38 +02:00
parent a7ac7d105c
commit 5bd80b1333
4 changed files with 34 additions and 3 deletions
+15
View File
@@ -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);
}