Skip to content

fix(ui): eliminate UI flickering, modal race conditions, and animation jank - #159

Open
Tell-Shanks wants to merge 1 commit into
Midrags:mainfrom
Tell-Shanks:fix/ui-flicker-and-animations
Open

fix(ui): eliminate UI flickering, modal race conditions, and animation jank#159
Tell-Shanks wants to merge 1 commit into
Midrags:mainfrom
Tell-Shanks:fix/ui-flicker-and-animations

Conversation

@Tell-Shanks

Copy link
Copy Markdown

Summary

This PR fixes visual flickering and UI jank across the SFF web UI by addressing modal timing races, dropdown flash/repaint storms, page transition flicker, card animation jank, and background repaint jank.

Files changed

  • sff/webui/js/components.js — modal generation counter, increased observer debounce, capped card stagger delay
  • sff/webui/js/app.js — dropdown population via DocumentFragment to prevent flash
  • sff/webui/css/main.css — page default opacity and CSS containment
  • sff/webui/css/cards.css — hardware acceleration for stagger animations
  • sff/webui/css/premium.css — GPU-layer isolation for background gradient and explicit transitions

Testing notes

  • Verify modals no longer blink when opened repeatedly in quick succession.
  • Verify large game dropdowns rebuild without visible flash.
  • Verify long card lists animate smoothly without cumulative lag.

- components.js: add modal generation counter to cancel stale hideModal timeouts
- components.js: increase CustomSelect MutationObserver debounce from 10ms to 50ms
- components.js: cap card stagger animation delay at 0.4s
- app.js: populate game dropdown via DocumentFragment to prevent dropdown flash
- main.css: default .page to opacity: 0 and contain: layout style
- cards.css: add will-change: opacity, transform for stagger hardware acceleration
- premium.css: isolate body::before gradient stack into GPU compositing layer
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant