CircularOption: Avoid paint on circular option hover

[corentin-gautier]

What?

Avoid browser paint when hovering the circular-option-picker

How?

A simple will-change: transform

Testing Instructions

1. Open the dev console and enable the paint flashing (under rendering)
2. Open a color palette popover
3. Hover over a color
4. There should not be paint on the circular options

Screenshot

Before

Screen.Recording.2022-11-30.at.15.05.56.mov

After

Screen.Recording.2022-11-30.at.15.06.55.mov

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @corentin-gautier! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[tyxla]

Thanks for your work here @corentin-gautier! Also, I appreciate you splitting the changes into multiple PRs!

[tyxla]

All sources of documentation (for example https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#via_script and ) I read about will-change suggest that we add it programmatically and remove it after it's served its purpose, rather than having it enabled by default.

Have you considered adding it as a one-off effect in this component and then removing it on cleanup?

[corentin-gautier]

@tyxla You're thinking of adding it when the popover opens ? We can use a translateZ(0) instead of will-change to get the same result !

[ciampo]

Have we tested adding it only on hover/focus ? Or what about using the contain CSS property instead?

[tyxla]

I think adding it on :hover/:focus can be too late since the browser won't be able to do the optimizations before performing the actual element transformation.

[tyxla]

This looks great 🚀 Thanks @corentin-gautier!

One thing we could explore is adding will-change: transform in the component at mount time and then removing it at cleanup/unmount time, but I didn't see a reason to do that. The only reason to think it could be an improvement is the corresponding suggestion in its docs. It's fine to take it step by step though!

🚀