From 53e4c40bda48a9ca3df930cd4a437001272a257e Mon Sep 17 00:00:00 2001 From: Oliver Juhas Date: Wed, 21 Nov 2018 14:51:04 +0100 Subject: [PATCH] Fixing IE11 flexbox alignment when min-width is set (#9196) * Fixing IE11 flexbox alignment when min-width is set For more info on the fix please see https://github.com/philipwalton/flexbugs/issues/231 * Updating the IE11 alignment fix Updating the fix to use https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042 approach for cases with larger cover image text. * Documenting the code * chore: Tweak code style * Add display: block, remove Github ticket mention. * Ignore the IE11 cover image fix in browsers that support flex. * Add a better description of the IE fix. * Fix typo. --- packages/block-library/src/cover/style.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 806ed02fb2dc9b..a9223bfb30c2fe 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -96,6 +96,20 @@ width: 100%; } + // Using flexbox without an assigned height property breaks vertical center alignment in IE11. + // Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue. + &::after { + display: block; + content: ""; + font-size: 0; + min-height: inherit; + + // IE doesn't support flex so omit that. + @supports (position: sticky) { + content: none; + } + } + // Aligned cover blocks should not use our global alignment rules &.aligncenter, &.alignleft,