Cover: Use overflow: clip, falling back to overflow: hidden to allow sticky children (technically) #50237
+3
−1
Conversation
This file contains hidden or 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
andrewserong
added
[Type] Bug
andrewserong
requested review from
aaronrobertshaw,
apeatling,
noisysocks and
tellthemachines
|
Size Change: +25 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
noisysocks
reviewed
May 2, 2023
Member
noisysocks
left a comment
noisysocks
left a comment
There was a problem hiding this comment.
Very cool 👍 didn't know about clip. This tests well.
noisysocks
approved these changes
May 2, 2023
aaronrobertshaw
approved these changes
May 2, 2023
Contributor
aaronrobertshaw
left a comment
aaronrobertshaw
left a comment
There was a problem hiding this comment.
Works well for me as well. Nice use of clip 👍
Thanks for the fix!
| Before | After |
|---|---|
 |
 |
Contributor
Author
|
Thanks for the reviews! |
andrewserong
deleted the
try/cover-block-use-overflow-clip-instead-of-overflow-hidden
branch
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?
Follow-up to #50209.
Add
overflow: cliprule to the Cover block's styling, falling back tooverflow: hidden.Why?
In #50209, the
overflow: hiddenrule was re-instated for the Cover block, so that rounded borders would correctly clip the inner background element. However,overflow: hiddencauses sticky positioned child elements to no longer be sticky to the overall document as it creates a new formatting context.overflow: clipon the other hand clips the overflow content without creating a new formatting context, so that sticky children can still scroll along with the document (while sticking to the parent container).Browser support appears to be pretty good amongst evergreen browsers (https://caniuse.com/?search=overflow%3Aclip), but to be on the safe side, I've preserved the fallback
overflow: hiddenfor older browsers.How?
overflow: cliprule to the Cover block, that overridesoverflow: hidden.overflow: hiddenis preserved so that the border radius still works correctly on older browsersTesting Instructions
Testing that this works correctly with sticky blocks is a little tricky — it involves creating a sticky group block outside of a Cover block, and then dragging it to be within the cover block. Then, add enough content to the cover block so that the sticky block is sticky when the window is scrolled. To make it easier, I've added some test markup below:
Test markup of a Cover block with a sticky group block within it
Screenshots or screencast
The below screengrab demonstrates that
overflow: clipallows both the cover block's background to be clipped and for sticky children to work correctly. Note that the UI for allowing non-root sticky position has not been enabled yet, as that is being worked on over in #493212023-05-02.15.37.16.mp4