Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ListView: Avoid paint on list view item hover #46188

Merged
merged 1 commit into from Dec 1, 2022

Conversation

corentin-gautier
Copy link
Contributor

@corentin-gautier corentin-gautier commented Nov 30, 2022

What?

Avoid paint when hovering the list view items

Why?

When hovering the list view items, paint is triggered all over the UI because of changes in zindex and position. This will result in poor performances

How?

Add a will-change: opacity and remove the changes in zindex/position

Testing Instructions

  1. Open the dev console and enable the paint flashing (under rendering)
  2. Open the list view
  3. Hover over a list item
  4. There should not be any repaint

Screenshot

Before

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

After

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

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Nov 30, 2022
@github-actions
Copy link

👋 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.

Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

Changes look good and test well as per instructions (e2e test failures don't seem related) 🚀

Thank you @corentin-gautier !

@ciampo ciampo enabled auto-merge (squash) December 1, 2022 21:17
@ciampo ciampo added this to In progress (owned) ⏳ in WordPress Components via automation Dec 1, 2022
@ciampo ciampo merged commit 4b4a3f0 into WordPress:trunk Dec 1, 2022
WordPress Components automation moved this from In progress (owned) ⏳ to Done 🎉 Dec 1, 2022
@github-actions github-actions bot added this to the Gutenberg 14.8 milestone Dec 1, 2022
@corentin-gautier corentin-gautier deleted the fix/list-view-paint branch December 2, 2022 13:12
mpkelly pushed a commit to mpkelly/gutenberg that referenced this pull request Dec 7, 2022
Co-authored-by: Corentin Gautier <corentin.gautier@consertotech.pro>
@ryanwelcher ryanwelcher changed the title Avoid paint on list view item hover ListView: Avoid paint on list view item hover Dec 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Package] Block editor /packages/block-editor [Type] Performance Related to performance efforts
Projects
Development

Successfully merging this pull request may close these issues.

None yet

3 participants