-
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
Lightbox: Fix close button position. #56125
Conversation
Flaky tests detected in 4325568. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6867731391
|
gutenberg/packages/block-library/src/image/style.scss Lines 375 to 392 in a1ccf42
The 50vw here should also be 50%. |
Size Change: -582 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
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.
Thanks for the PR! The approach seems to make sense to me too, but I'll leave a comment regarding one edge case.
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.
Thanks for the PR! This approach seems sound to me! 👍
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.
LGTM!
- ✅ When the document has the scrollbar
- ✅ When the document has the scrollbar and the body element has a fixed width
- ✅ When the document has no scrollbar
- ✅ When the document has no scrollbar and the body element has a fixed width
What?
Changed the position of close button to be calculated from the inside of the scroll bar.
Why?
Fix #56052.
This problem is more noticeable in Chrome on Windows because of the wider scrollbars, but the same problem occurs when the scrollbars are displayed on a Mac.
How?
Change width of
.wp-lightbox-overlay
to100%
.Because
.wp-lightbox-overlay
is a child element ofbody
, 100% is the size of 100vw minus the width of the scrollbar.Within
keyframes
100%
is not computed. Instead100vw - $scrollbar-width
is used.Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast