Fix mobile topbar scroll stability

Author: zhaobozhen

AGENTS.md

@@ -94,6 +94,7 @@
 - The Web UI check script auto-scans Web UI `src/` and `scripts/`. Keep it as the single package-level entrypoint instead of lengthening `package.json` with per-file `node --check` lists.
 - Segmented controls should share the established title-bar pill geometry: real capsule ends (`border-radius: 999px` and `corner-shape: round` where used), inset-shadow borders instead of layout-affecting borders, consistent inner inset, and draggable thumb support when the paired control supports it. Keep click and drag paths separate so click transitions can animate and drag can follow the pointer.
 - For touch UI, do not rely on mobile Safari clearing `:hover`. Gate hover-only highlights behind `(hover: hover) and (pointer: fine)`, and clear touch active classes on `pointerup`, `pointercancel`, and blur.
+- For touch/mobile topbar stability, keep the fixed header path free of expensive compositor triggers such as `contain: paint`, forced transforms, `will-change`, and backdrop blur; iOS Safari can hide or jitter fixed headers during address-bar scroll when those are stacked together.
 - iOS/iPadOS file pickers can gray out `.apk/.apks/.apkm/.xapk` when `accept` is set. Use the existing `file-picker-support.js` path to relax picker filtering on Apple mobile WebKit while preserving in-app file validation.
 - Liquid/glass-like effects must be capability- and power-mode gated, not OS-name gated. `CSS.supports()` can be a false positive for SVG-backed backdrop filters on Android/iOS browser shells; keep explicit fallback reasons in `liquid-glass-support.js` and prefer old stable backgrounds when rendering is suspect.
 - WebUI CSS gzip budget is intentionally tight. Before raising the budget, prefer lazy CSS for non-first-screen UI (`runtime-log.css`, `lcapps-bubble.css`), removing duplicated control rules, or consolidating existing tokens. A modest budget raise is acceptable only when the transferred gzip size and first-screen impact are understood.

packages/apk-webui/src/app.css

@@ -183,7 +183,6 @@ body {
   color: var(--text);
   font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Segoe UI", sans-serif;
   -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;
@@ -345,7 +344,6 @@ svg {
   overflow: hidden;
   overflow: clip;
   contain: paint;
-  backface-visibility: hidden;
   will-change: transform;
   transform: translate3d(0, 0, 0);
 }
@@ -359,7 +357,6 @@ svg {
   background: var(--topbar-bg);
   -webkit-backdrop-filter: saturate(180%) blur(18px);
   backdrop-filter: saturate(180%) blur(18px);
-  backface-visibility: hidden;
   will-change: transform, backdrop-filter;
   transform: translate3d(0, 0, 0);
 }
@@ -393,7 +390,6 @@ svg {
   width: max-content;
   max-width: var(--brand-title-max-width);
   min-width: 0;
-  overflow: visible;
 }
 
 .brand-mark {
@@ -403,7 +399,6 @@ svg {
   place-items: center;
   width: 26px;
   height: 26px;
-  overflow: visible;
 }
 
 .brand-orb {
@@ -495,15 +490,10 @@ svg {
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Segoe UI", sans-serif;
   font-size: 14px;
   font-weight: 600;
-  font-kerning: normal;
   line-height: 1.15;
   letter-spacing: 0;
   white-space: nowrap;
   max-width: var(--brand-title-max-width);
-  cursor: default;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  user-select: none;
 }
 
 .brand-title.is-text-rendered {
@@ -515,10 +505,6 @@ svg {
   line-height: 1;
 }
 
-.brand-title.is-switching-title {
-  overflow: visible;
-}
-
 .brand-title__layer {
   grid-area: 1 / 1;
   display: block;
@@ -527,9 +513,6 @@ svg {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  cursor: default;
-  -webkit-user-select: none;
-  user-select: none;
 }
 
 .brand-title__text {
@@ -556,7 +539,6 @@ svg {
   overflow: visible;
   padding: 0 12px;
   margin: 0 -12px;
-  text-overflow: clip;
 }
 
 .brand-title__layer--enter .brand-title__blur-word {
@@ -584,7 +566,6 @@ svg {
   overflow: hidden;
   padding: 0 12px;
   margin: 0;
-  text-overflow: clip;
 }
 
 .brand-title__layer--exit .brand-title__blur-word {
@@ -764,14 +745,6 @@ svg {
   box-shadow: inset 0 0 0 1px var(--topbar-focus);
 }
 
-.mode-chip.is-active {
-  color: var(--topbar-selected-text);
-}
-
-.mode-chip.is-pending {
-  color: var(--topbar-selected-text);
-}
-
 .topbar-github-link {
   flex: 0 0 auto;
   color: var(--topbar-muted);
@@ -863,11 +836,9 @@ svg {
   box-shadow: inset 0 0 0 1px var(--topbar-focus);
 }
 
-.theme-chip.is-active {
-  background: transparent;
-  color: var(--topbar-selected-text);
-}
-
+.mode-chip.is-active,
+.mode-chip.is-pending,
+.theme-chip.is-active,
 .theme-chip.is-pending {
   color: var(--topbar-selected-text);
 }
@@ -4409,11 +4380,6 @@ svg {
     margin-right: 12px;
   }
 
-  .brand-title.is-text-rendered,
-  .brand-title__layer {
-    flex-wrap: nowrap;
-  }
-
   .topbar-actions {
     flex: 1 1 auto;
     width: auto;
@@ -4543,9 +4509,6 @@ svg {
 @media (max-width: 600px) {
   .brand {
     max-width: min(32vw, 136px);
-  }
-
-  .brand {
     --brand-title-max-width: clamp(72px, 18vw, 96px);
   }
 }
@@ -4697,6 +4660,25 @@ svg {
 
 }
 
+@media (hover: none), (pointer: coarse) {
+  .color-orb-background {
+    transform: none;
+  }
+
+  .topbar {
+    contain: none;
+    will-change: auto;
+    transform: none;
+  }
+
+  .topbar::before {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    will-change: auto;
+    transform: none;
+  }
+}
+
 @keyframes progress-shiny-text {
   0% {
     background-position: 150% center;

packages/apk-webui/src/app.js

@@ -2509,6 +2509,20 @@ function initColorOrbBackground() {
     const dpr = Math.min(window.devicePixelRatio || 1, DOT_FIELD_DPR_LIMIT);
     const pixelWidth = Math.max(1, Math.round(width * dpr));
     const pixelHeight = Math.max(1, Math.round(height * dpr));
+    const sizeChanged = (
+      metrics.width !== width ||
+      metrics.height !== height ||
+      metrics.dpr !== dpr ||
+      canvas.width !== pixelWidth ||
+      canvas.height !== pixelHeight
+    );
+
+    metrics.left = rect.left;
+    metrics.top = rect.top;
+    if (!sizeChanged) {
+      drawFrame();
+      return;
+    }
 
     if (canvas.width !== pixelWidth) {
       canvas.width = pixelWidth;
@@ -2519,8 +2533,6 @@ function initColorOrbBackground() {
 
     metrics.width = width;
     metrics.height = height;
-    metrics.left = rect.left;
-    metrics.top = rect.top;
     metrics.dpr = dpr;
     context.setTransform(dpr, 0, 0, dpr, 0, 0);
     buildDots();
@@ -2770,12 +2782,13 @@ function initColorOrbBackground() {
   window.addEventListener("blur", clearPointer);
   window.addEventListener("apk-theme-change", refreshPalette);
   window.addEventListener("apk-power-mode-change", refreshMotionMode);
+  addChangeListener(fineHoverMedia, refreshMotionMode);
   document.addEventListener("visibilitychange", refreshMotionMode);
   startAnimation();
 }
 
 function shouldAnimateDotField() {
-  return !isAppPowerConstrained() && document.visibilityState !== "hidden";
+  return !isAppPowerConstrained() && document.visibilityState !== "hidden" && fineHoverMedia.matches;
 }
 
 function resolveDotFieldPalette() {