Skip to content

Comments

fix: replace transition: all with specific properties for GPU compositing#1329

Merged
itsalaidbacklife merged 28 commits intomainfrom
fix/css-transition-all-gpu-compositing
Feb 10, 2026
Merged

fix: replace transition: all with specific properties for GPU compositing#1329
itsalaidbacklife merged 28 commits intomainfrom
fix/css-transition-all-gpu-compositing

Conversation

@seriouslysean
Copy link
Collaborator

@seriouslysean seriouslysean commented Feb 5, 2026 •
edited
Loading

Issue number

Summary

Addresses the rendering glitches on Intel Macs where the UI fragments during card animations. We think the root cause is transition: all creating too many GPU compositor layers, so this should help.

Main changes:

  • Replaced transition: all with specific properties everywhere
  • Added CSS variables for durations and fonts
  • Added prefers-reduced-motion support
  • Created shared transitions file (was duplicated in GameView/GameCard)
  • Renamed surface-1/surface-2 to base-dark/base-light
  • Fixed memory leak in GameView resize handler
  • Added CSS containment to isolated components

Also bumped Vuetify and enabled tree-shaking while I was in there @itsalaidbacklife

Please check the following

  • Do the tests still pass? (see Run the Tests)
  • Is the code formatted properly? (see Linting (Formatting))
  • For New Features:
    • Have tests been added to cover any new features or fixes?
    • Has the documentation been updated accordingly?

Please describe additional details for testing this change

Play a game and make sure card animations still work. Flip cards, check scrap pile, etc. If you can test with DevTools Performance tab open that'd be ideal

@seriouslysean
fix: replace transition: all with specific properties for GPU composi…
ecbbca8 
…ting

Fixes rendering glitches on Intel Macs where the UI fragments during
card animations due to GPU compositor overload.

- Replace transition: all with specific animated properties
- Add CSS custom properties for transition durations
- Add prefers-reduced-motion support
- Fix malformed CSS (missing 's' unit in two transitions)
- Remove unused .gameCard class

Resolves #1328
Copilot AI review requested due to automatic review settings February 5, 2026 01:56
@seriouslysean seriouslysean self-assigned this Feb 5, 2026
@seriouslysean seriouslysean added bug Something isn't working version-patch An update that warrants a bumping the project's patch version (e.g. 4.0.0 => 4.0.1) labels Feb 5, 2026
Copilot AI reviewed Feb 5, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes severe rendering glitches on Intel MacBooks caused by excessive GPU compositor layer creation from transition: all declarations. The fix replaces all instances with specific transition properties to reduce GPU overhead.

Changes:

  • Replaced all transition: all with specific animated properties (opacity, transform, rotate, etc.)
  • Added CSS custom properties --transition-duration: 1s and --transition-duration-fast: 0.3s
  • Implemented prefers-reduced-motion media query support to disable animations for accessibility
  • Fixed two instances of malformed CSS (missing s unit on transition durations)
  • Removed unused .gameCard class

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file
File Description
src/App.vue Added CSS custom properties for transition durations and prefers-reduced-motion support
src/routes/game/GameView.vue Updated .transition-all class, deck expansion, and turn indicator transitions; removed unused .gameCard class; fixed malformed CSS
src/routes/game/components/GameCard.vue Updated scuttled card, frozen effect, and card flip transitions
src/routes/game/components/ScrapPile.vue Updated main scrap pile, card entry/exit, and three-card transitions; fixed malformed CSS
src/routes/game/components/MoveChoiceCard.vue Updated move choice card hover transition
src/components/PlayerReadyIndicator.vue Updated card rotation transition

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

seriouslysean
seriouslysean commented Feb 5, 2026
View reviewed changes
@seriouslysean
chore: update vuetify 3.10.7 -> 3.11.8, vite-plugin-vuetify 2.1.2 -> …
a48c17c 
…2.1.3
@seriouslysean
feat: enable Vuetify tree-shaking via autoImport
5e9efdb 
- Set autoImport: true in vite.config.mjs
- Remove global component/directive imports from vuetify.js
- Reduces CSS bundle from ~810KB to ~640KB (~21% reduction)
@seriouslysean
refactor: remove unused buttonSize computed property
9da32d6
@seriouslysean
refactor: rename colors semantically and add duration system
23f2f81 
Color renames (semantic naming for what they represent in the game):
- surface-1 → game-board (the playing surface)
- surface-2 → game-card (the card material)
- newSecondary → casual (casual game mode)
- gold → forfeit (opponent left/abandoned state)

Cleanup:
- Remove 15+ unused color variants from Vuetify theme
- Remove duplicate CSS color variables from App.vue

Duration system (prefers-reduced-motion support):
- Add bucketed duration variables: instant, fast, normal, slow, slower
- Update hardcoded animation durations to use variables
- All animations now respect prefers-reduced-motion
@seriouslysean
refactor: consolidate CSS transitions and theme colors for performance
4d11e25 
- Create shared transitions.scss with Vue transition classes
- Add Transitions.json constants for consistent naming
- Rename transitions: slide-below→slide-down, slide-above→slide-up,
  in-below-out-left→slide-down-left, in-above-out-below→slide-up-down
- Add semantic Vuetify theme colors (text-light, text-dark, shadow,
  history-panel, quote-bg, quote-text, table-row, table-row-active, stats-link)
- Add CSS font-family variables (--font-heading, --font-body, etc.)
- Fix GPU compositing: use transform instead of right/top in animations
- Add content-visibility and contain properties for render performance
- Remove ~50 duplicate CSS lines across components
seriouslysean
seriouslysean commented Feb 5, 2026
View reviewed changes
Copy link
Collaborator Author

@seriouslysean seriouslysean left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Notes on the changes

@seriouslysean
fix(tests): use ThemeColors constants for renamed color vars
950b248 
Added utils/ThemeColors.json for consistent color name usage.
Updated e2e tests to use constants instead of hardcoded strings.
Copilot AI review requested due to automatic review settings February 5, 2026 03:14
seriouslysean
seriouslysean commented Feb 5, 2026
View reviewed changes
seriouslysean
seriouslysean commented Feb 5, 2026
View reviewed changes

This comment was marked as outdated.

Sign in to view

@seriouslysean
fix(GameView): clean up resize listener on unmount
13d928f 
Prevents memory leak when navigating away from game
@seriouslysean seriouslysean added version-minor An update that warrants a bumping the project's minor version (e.g. 4.0.0 => 4.1.0) and removed version-patch An update that warrants a bumping the project's patch version (e.g. 4.0.0 => 4.0.1) labels Feb 5, 2026
seriouslysean
seriouslysean commented Feb 5, 2026
View reviewed changes
Copy link
Collaborator Author

@seriouslysean seriouslysean left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resize handler fix

@seriouslysean
perf: add --contain-isolated CSS variable and apply to components
91e9f5d 
Added contain: var(--contain-isolated) to isolated components for
render performance. Applied to GameCard, overlays, and game UI.
Copilot AI review requested due to automatic review settings February 5, 2026 03:26
Copilot AI review requested due to automatic review settings February 7, 2026 16:14

This comment was marked as outdated.

Sign in to view

@seriouslysean
refactor: rename theme colors game-board/game-card to surface-dark/su…
e102f64 
…rface-light, fix CSS bugs

- Rename game-board -> surface-dark and game-card -> surface-light across
  all components, tests, and constants (per PR review feedback)
- Rename tableRowBackground computed to backgroundColor in BaseLineChart
- Fix double semicolon typo in MoveChoiceCard
- Fix invalid CSS rotate syntax (rotate: y -90deg -> rotate: 0 1 0 -90deg)
  in ScrapPile
@seriouslysean
refactor: rename surface-dark/surface-light to base-dark/base-light
978b416 
Avoid collision with Vuetify's built-in surface-* color namespace.
base-dark/base-light matches the existing text-dark/text-light convention
and stays context-neutral.
@seriouslysean
Copy link
Collaborator Author

seriouslysean commented Feb 7, 2026

@itsalaidbacklife went with base-dark / base-light instead of surface-dark / surface-light -- Vuetify uses the surface-* namespace internally for its own theme colors. We don't actually use any of the built-in ones right now, but overriding them felt like asking for trouble down the line. base-dark / base-light avoids the collision, matches our existing text-dark / text-light convention, and stays context-neutral like you wanted. Also fixed a couple CSS bugs while in here (invalid rotate syntax in ScrapPile, double semicolon in MoveChoiceCard, and renamed the tableRowBackground computed to backgroundColor per your comment).

Copilot AI review requested due to automatic review settings February 7, 2026 21:54

This comment was marked as outdated.

Sign in to view

Copilot AI review requested due to automatic review settings February 8, 2026 01:07

This comment was marked as outdated.

Sign in to view

@seriouslysean
fix: add TransitionGroup move classes for FLIP animations
dd499ab 
The removal of transition-all also removed the transform transition
needed for Vue's TransitionGroup FLIP move animations. Add explicit
-move classes that only transition transform (GPU-composited).
itsalaidbacklife
itsalaidbacklife reviewed Feb 9, 2026
View reviewed changes
Copilot AI review requested due to automatic review settings February 9, 2026 18:39

This comment was marked as resolved.

Sign in to view

@itsalaidbacklife itsalaidbacklife added version-patch An update that warrants a bumping the project's patch version (e.g. 4.0.0 => 4.0.1) and removed version-minor An update that warrants a bumping the project's minor version (e.g. 4.0.0 => 4.1.0) labels Feb 10, 2026
@itsalaidbacklife itsalaidbacklife merged commit 92f0e55 into main Feb 10, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@itsalaidbacklife itsalaidbacklife itsalaidbacklife approved these changes

Assignees

@seriouslysean seriouslysean

Labels

bug Something isn't working version-patch An update that warrants a bumping the project's patch version (e.g. 4.0.0 => 4.0.1)

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

CSS transition: all causing rendering glitches on Intel Macs

3 participants

@seriouslysean @itsalaidbacklife