CircularOption: Avoid paint on circular option hover#46197
CircularOption: Avoid paint on circular option hover#46197tyxla merged 1 commit intoWordPress:trunkfrom
Conversation
|
👋 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. |
e2e0800 to
3284fdd
Compare
tyxla
left a comment
There was a problem hiding this comment.
Thanks for your work here @corentin-gautier! Also, I appreciate you splitting the changes into multiple PRs!
| vertical-align: top; | ||
| transform: scale(1); | ||
| transition: 100ms transform ease; | ||
| will-change: transform; |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
@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 !
There was a problem hiding this comment.
Have we tested adding it only on hover/focus ? Or what about using the contain CSS property instead?
There was a problem hiding this comment.
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
left a comment
There was a problem hiding this comment.
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!
🚀
Co-authored-by: Corentin Gautier <corentin.gautier@consertotech.pro>
What?
Avoid browser paint when hovering the circular-option-picker
How?
A simple will-change: transform
Testing Instructions
Screenshot
Before
Screen.Recording.2022-11-30.at.15.05.56.mov
After
Screen.Recording.2022-11-30.at.15.06.55.mov