Fix scroll jitter in Customize Widgets #32479
Merged
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
|
Size Change: +7 B (0%) Total Size: 1.04 MB
ℹ️ View Unchanged
|
stokesman
added
[Feature] Widgets Customizer
noisysocks
added
the
Backport to WP 6.7 Beta/RC
stokesman
force-pushed
the
fix/customize-widgets-scroll-jitter
branch
from
45941f6
to
15c079f
Compare
|
Tried giving this a test today, but I'm struggling to reproduce it. I've noticed sometimes the customizer doesn't enable the sticky header area, and I don't know what determines that, but today |
|
Thanks for testing. How odd! I tested today with gutenberg.run and saw the same as you, the lack of any sticky related classes being applied when in the widgets editor. Then I tried the latest trunk on my local setup and found it still has this issue. Turns out that the theme somehow has something to do with it. Using Twenty Twenty in either gutenberg.run or locally the issue is present. All the other themes I tried aren't sticking the header. 🤔 I don't think that means it's an issue for Twenty Twenty because the sticky header is expected. It was apparently the reason for these overrides/#32140. I've not figured out why this can vary between themes but I still think this PR is FTW. It also fixes one other tiny thing that's present no matter the theme: Should be 12px.
|
adamziel
approved these changes
Jun 23, 2021
stokesman
force-pushed
the
fix/customize-widgets-scroll-jitter
branch
from
15c079f
to
2adc1cd
Compare
|
Thanks Adam! This is rebased and now the only failure is the same android e2e that seems broken in trunk. |
|
This PR is purely customizer screen scss, so can't be affecting react native. Given that I'll merge the PR. Thanks for fixing this @stokesman! |
youknowriad
removed
the
Backport to WP 6.7 Beta/RC
youknowriad
pushed a commit
that referenced
this pull request
Jun 24, 2021
youknowriad
pushed a commit
that referenced
this pull request
Jun 24, 2021
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.
Follow up of #32140 which has left the editor with some scroll jitter. No separate issue is made so including reproduction steps here for confirmation of the issue.
UPDATE: So far I can only reproduce this with the Twenty Twenty theme active. It's not clear why other themes seem to prevent the sticky behavior of the Customizer header only in the widgets editor.
Steps to reproduce
Screen recording
The video first shows how the jump can be spotted when returning to the top of the scroll. A bit later, it is shown how the jitter may be triggered.
customize-widgets-scroll-glitch.mp4
About the apparent cause and changes in the PR
The negative
margin-topof the sticky header is cleared during upward scrolling as part of the customizer’s js-controlled “sticky” positioning. Overriding that to keep the margin constantly applied avoids the issue.How has this been tested?
In the customizer trying and failing to recreate the problems shown in the screen recording.
Types of changes
Bug fix
Checklist:
*.native.jsfiles for terms that need renaming or removal).