Image lightbox: fix jitter scrolling by adopting css based overflow fix #62477
+9
−65
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
madhusudhand
requested review from
artemiomorales and
michalczaplinski
as code owners
|
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 |
madhusudhand
commented
Jun 11, 2024
| @@ -207,7 +207,7 @@ | |||
|
|
|||
| .lightbox-image-container { | |||
| position: absolute; | |||
| overflow: hidden; | |||
| // overflow: hidden; | |||
There was a problem hiding this comment.
I believe, this is no longer required and additionally, it preserves effects such as shadow in the lightbox. But not quite sure if that should be the intended behavior.
| Before | After |
|---|---|
 |
 |
madhusudhand
force-pushed
the
lightbox-scroll-overflow
branch
from
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 🙏 |
mikachan
reviewed
Jun 26, 2024
There was a problem hiding this comment.
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: hiddenonbody, we could try settingposition: fixedonbodyas 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.
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.
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: hiddento thebodyelement when lightbox is invoked and restores itsoriginal overflow statewhen lightbox is closed.Testing Instructions