Skip to content

Fixing IE11 flexbox alignment when min-width is set #9196

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

Merged
tofumatt merged 9 commits into from
Nov 21, 2018
Merged

Fixing IE11 flexbox alignment when min-width is set #9196

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
354ce95
Fixing IE11 flexbox alignment when min-width is set
webmandesign Aug 21, 2018
d72da90
Updating the IE11 alignment fix
webmandesign Aug 21, 2018
7f8d717
Documenting the code
webmandesign Aug 21, 2018
a138b83
chore: Tweak code style
tofumatt Aug 21, 2018
f2819d4
Merge branch 'master' into pr/9196
kjellr Nov 16, 2018
f648583
Add display: block, remove Github ticket mention.
kjellr Nov 16, 2018
0954f43
Ignore the IE11 cover image fix in browsers that support flex.
kjellr Nov 20, 2018
fa85a2f
Add a better description of the IE fix.
kjellr Nov 20, 2018
fad6277
Fix typo.
kjellr Nov 20, 2018
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
14 changes: 14 additions & 0 deletions packages/block-library/src/cover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Member

@tofumatt tofumatt Nov 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That seems weird, could you include context for this fix in the CSS so future developers can understand this hack?

Copy link
Contributor

@kjellr kjellr Nov 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. To be honest though, I'm not sure why this works. 😄

Maybe something like this would be more informative...

// Using flexbox without an assigned height property breaks vertical center alignment in IE11. 
// Apphending an empty ::after element corrects this issue.

@webmandesign do you happen to know more details on the fix? There isn't much context here.

Copy link
Contributor

@chrisvanpatten chrisvanpatten Nov 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Appending the pseudo element is sort of like providing a float clearing element; it tricks IE into giving the element an implicit height rather than collapsing to zero and preventing the vertical alignment.

Copy link
Contributor

@kjellr kjellr Nov 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for clarifying that, @chrisvanpatten. I've added a clearer description. 👍

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,
Expand Down