Fix Safar 13 metaboxes from overlapping the content. (#33817)

WordPress · Aug 5, 2021 · 5e24b5c · 5e24b5c
1 parent 115e8c2
commit 5e24b5c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -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',

diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
@@ -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
@@ -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;
 }