Skip to content

[6.x] Make stacks smoother#14210

Open
jaygeorge wants to merge 6 commits into6.xfrom
make-stacks-smoother-than-butter-is-butter
Open

[6.x] Make stacks smoother#14210
jaygeorge wants to merge 6 commits into6.xfrom
make-stacks-smoother-than-butter-is-butter

Conversation

@jaygeorge
Copy link
Contributor

Description of the Problem

I noticed that stack-on-stack performance can degrade when you get a few layers deep and start playing with fields. This is especially noticeable when you open stack layers on a large viewport such as 2560px (5K monitor), where any performance shortcomings are laid bare.

For what it's worth, I'm noticing this on an M2 processor – stacks should perform better than they do on this machine.

What this PR Does

Fixes overlay performance and flicker by…

  • Moves the overlay outside the container

  • Animates with transform rather than left/right – transform animations are usually handled by the GPU (compositor layer) and do not trigger layout recalculations.

  • Stacks are no longer re-animated when a new field is picked. Picking a new field creates a lot of DOM movement as particular field options are loaded in—this, in addition to shuffling the stacks, seems to create performance issues

  • Suppress hover during the new stack’s enter animation, to prevent the previous stack wobbling left then right as the hover effect is removed. This was creating extra movement as the new stack was animating in

  • FYI Claude also recommended adding a @keydown.esc handler for more reliable escape key handling. I'm not sure about that, so feel free to remove if you disagree.

Here are some demos of before and after on a 27-inch 5K screen, so you can see the performance strains better

Before Safari

You'll notice it's OK up until the third level deep (where I add a checkbox field)
Safari is particularly sluggish. It doesn't have the same render flashing behaviour that Chrome has, instead it just feels like it's struggling.

Safari.Before.mp4

Before Chrome

You'll notice it's OK up until the third level deep (where I add a checkbox field)
When I close the third-level stack and re-open it to re-add the checkbox, it's really bad, with multiple render flashes.
It seems to get progressively worse the more you interact with the stacks, and the deeper you go.

Chrome.Before.mp4

After Safari

After.Safari.mp4

After Chrome

Chrome.After.mp4

FYI, Firefox's performance is similar.

How to Reproduce

  1. Add a blueprint several layers deep. In the demo I have Bard > Replicator > Checkbox
  2. Do this on a wide monitor so the browser has to work harder and expose any performance bottlenecks

… overlay outside the container, and removing will-change to reduce composite layer thrashing
…ld creates a lot of DOM movement as options are loaded in—this in addition to shuffling the stacks can create performance issues
… previous stack wobbling left then right as the hover effect is removed
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