Performance: Set passive listener option for use popover scroll to avoid affecting scrolling performance #33478
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… scrolling performance
|
Size Change: +18 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
37 tasks
It should only be added on mount for any block UI popovers. Perhaps the warning is logged whenever the event (wheel) listener is called? Not sure why it would be added every time the mouse moves. The event listener is necessary to "scroll through" block UI popovers that are positioned over the editor canvas. I'm not sure about the feature detection unfortunately. Which older browsers are we talking about? |
ellatrix
approved these changes
Jul 26, 2021
Mostly IE it looks. Peeking at https://caniuse.com/usage-table I think we should be okay for the block editor. I'd maybe have more concerns if this was being added on a published post view. (Total aside, the official suggested feature detection for this is one of the most awkward I've seen for a DOM spec.) If folks are comfortable with it, we can try merging as is. 👍 |
|
I think we no longer support IE entirely?
Sounds good. |
|
Thanks for the review @ellatrix ! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Setting
{ passive: true }lets a browser know that we don't intend to callevent.preventDefaultand avoids the need to block scrolling. Without it, scrolling performance may be affected see (https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md and https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners). As a plus, we can also get rid of this annoying warning in chrome :DTwo questions for folks:
Why do we need to add and remove this listener so often as we mouse over elements?
I notice that this the warning is showing up whenever I move my mouse in trunk.
Where is a good spot to put feature detection?
Unfortunately, the object option will be read as
falseon older browser. Mozilla recommends feature detection similar to the following. Is there a good package for this test, or do we already use something like https://modernizr.com/ ?