-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Image lightbox: fix jitter scrolling by adopting css based overflow fix #62477
Conversation
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress. If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged. If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack. Thank you! ❤️ View changed files❔ packages/block-library/src/image/index.php |
@@ -207,7 +207,7 @@ | |||
|
|||
.lightbox-image-container { | |||
position: absolute; | |||
overflow: hidden; | |||
// overflow: hidden; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
a81c5c6
to
9928f25
Compare
Size Change: -97 B (-0.01%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
Flaky tests detected in 9928f25. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9465306062
|
@madhusudhand Thanks for the PR! We actually had an implementation similar to this just using CSS in #53026, and it was revised to prevent inconsistent behavior on mobile and layout shifts. I tested this PR and noticed that the experience sometimes breaks on mobile (tested using Safari on iPhone). This is a web usability issue, because it can cause users to lose context of where they are on the page: mobile-lightbox-scroll.mp4Also, the layout shifts using this approach, which is particularly noticeable at smaller resolutions: lightbox-layout-shift2.mp4lightbox-layout-shift.mp4The JavaScript approach and jitter isn't ideal; it would be great if we could have a CSS solution that behaves consistently on mobile and avoids jittering and layout shifts. Would also be great to hear if anyone has other thoughts or ideas on how to address this 🙏 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would also be great to hear if anyone has other thoughts or ideas on how to address this 🙏
I'm adding some thoughts as I've attempted to fix similar issues in the past, but most solutions have trade-offs.
- In addition to setting
overflow: hidden
onbody
, we could try settingposition: fixed
onbody
as well. Unfortunately, this also resets the scroll position, but perhaps we could scroll to the previous position with JS. (There's some examples of this here.) - We could consider using an additional package, like body-scroll-lock. But I'm hesitate to suggest adding something like this if we can fix it using either just CSS or a combination of CSS and JS.
Closing it as the fix breaking the experience as mentioned in this comment. |
What?
Image lightbox currently uses javascript based scroll position reset on scroll event. This causes slight jitter effect in the UI.
How?
This fix removes the javascript based handlers. Instead it sets
overflow: hidden
to thebody
element when lightbox is invoked and restores itsoriginal overflow state
when lightbox is closed.Testing Instructions