POC: Try fixing Safari top toolbar issue. #53665
Closed
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: -1 B (0%) Total Size: 1.51 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 1609f79. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5864991667
|
draganescu
requested changes
Aug 15, 2023
|
Ack, that's disappointing, but I figured there was a good reason for the value. I'll have to debug further, notably around why it gets cropped off not always, but only when the viewport is small, but would appreciate additional brains on this 🙏 |
|
Closing in favor of #53688 |
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?
Proof of concept: do not merge yet.
Work in progress to fix #53495.
Why?
In Safari, for whatever reason when the viewport gets reduced in height,
.interface-interface-skeleton__contentgets "Scroll" applied, which crops off the top toolbar which is pushed up to cover the main bar at the top:This is more easily shown in this GIF of the inspector, showing the "Scroll" property appearing when resizing the window:
So far this PR "fixes" the issue by removing the overflow value. However there's a great deal of prior comments around why that overflow property was added in the first place, so this needs a bit further debugging.
How?
It appears that the overflow as applied to the main viewport causes the cropping of the top toolbar.
Overflow of course makes the various containers scroll, this is valid enough, and a better fix might be to move where the toolbar lives so that it does not get cropped by the container that has overflow applied. However the position in the DOM is also delicate territory, so any testing, especially of the mobile use case, would be valuable. If the following instructions are obsolete, this PR can in fact land:
Testing Instructions
Observe how in trunk, the toolbar disappears, in this PR it stays.