openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: reduce page transition lag on Android (closes #48)

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/glass.css
+13 -2
View File
@@ -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
* ================================================================ */