fix: onboarding 401 redirect, glass card rendering bugs

- rpc-client: don't redirect to /login on 401 during onboarding flow,
  which caused session expired kicks on fresh installs
- style.css: add translateZ(0) + isolation:isolate to glass-card,
  glass-strong, path-option-card to fix Chromium compositor bug where
  backdrop-filter + animated fixed overlays cause black rectangles
- App.vue: pause background animations when tab hidden, force
  compositor layer rebuild on tab return to prevent stale renders

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-26 20:06:09 +00:00
co-authored by Claude Opus 4.6
parent 6b857e59d0
commit e4b4519061
3 changed files with 54 additions and 2 deletions
+22
View File
@@ -168,7 +168,28 @@ const isReady = ref(false)
* - User has already seen the intro
* - User is on a direct route (refresh/bookmark)
*/
// Fix Chromium backdrop-filter rendering bug: when tab loses/regains focus,
// the compositor fails to repaint backdrop-filter layers over animated
// fixed-position overlays (body::before/after with mix-blend-mode).
// On return: strip backdrop-filter via class, wait a frame, then restore.
function onVisibilityChange() {
if (document.hidden) {
document.documentElement.classList.add('tab-hidden')
} else {
// Step 1: kill all backdrop-filters (forces compositor to drop those layers)
document.documentElement.classList.add('no-backdrop')
document.documentElement.classList.remove('tab-hidden')
// Step 2: next frame, re-enable (compositor builds fresh layers)
requestAnimationFrame(() => {
requestAnimationFrame(() => {
document.documentElement.classList.remove('no-backdrop')
})
})
}
}
onMounted(async () => {
document.addEventListener('visibilitychange', onVisibilityChange)
window.addEventListener('keydown', onKeyDown, true)
window.addEventListener('mousemove', onUserActivity)
window.addEventListener('mousedown', onUserActivity)
@@ -196,6 +217,7 @@ onMounted(async () => {
})
onBeforeUnmount(() => {
document.removeEventListener('visibilitychange', onVisibilityChange)
window.removeEventListener('keydown', onKeyDown, true)
window.removeEventListener('mousemove', onUserActivity)
window.removeEventListener('mousedown', onUserActivity)