Skip to content
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.

Sign up for GitHub

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

Fix Safari 13 metaboxes from overlapping the content. #33817

Merged
merged 1 commit into from
Aug 5, 2021
Merged

Fix Safari 13 metaboxes from overlapping the content. #33817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/edit-post/src/components/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,8 @@ export default function VisualEditor( { styles } ) {
const { clearSelectedBlock } = useDispatch( blockEditorStore );
const { setIsEditingTemplate } = useDispatch( editPostStore );
const desktopCanvasStyles = {
height: '100%',
// We intentionally omit a 100% height here. The container is a flex item, so the 100% height is granted by default.
// If a percentage height is present, older browsers such as Safari 13 apply that, but do so incorrectly as the inheritance is buggy.
width: '100%',
margin: 0,
display: 'flex',
Expand Down
23 changes: 15 additions & 8 deletions packages/edit-post/src/components/visual-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,16 @@
}
}

flex: 1 1 auto;

// In IE11 flex-basis: 100% cause a bug where the metaboxes area overlap with the content area.
// But it works as expected without it.
// The flex-basis is needed for the other browsers to make sure the content area is full-height.
@supports (position: sticky) {
flex-basis: 100%;
}
// The following flex rule is important for the canvas layout, please be careful when refactoring,
// as older browser interpret flex height behavior differently. Be sure to test on Safari 13.
// The syntax is `flex: [flex-grow] [flex-shrink] [flex-basis];`
// We set the canvas to be allowed to grow (vertically), but not shrink.
flex: 1 0 auto;

// Since the parent container is also a flex container, a `flex-basis: 100%;` is not needed,
// as align-items: stretch is inherited by default.Additionally due to older browser's flex height
// interpretation, any percentage value is likely going to cause issues, such as metaboxes overlapping.
// See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property.
}

// Ideally this wrapper div is not needed but if we want to match the positioning of blocks
Expand Down Expand Up @@ -69,4 +70,10 @@
height: 100%;
position: relative;
display: flex;

// This is necessary for older browsers due to their flex height interpretation.
// These browsers (including Safari 13) ignore the percentage value entirely.
// By setting flex-grow, the element stretches to fill the parent.
// See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property
flex-grow: 1;
}