Fixing IE11 flexbox alignment when min-width is set

[webmandesign]

Description

Fixes #5791

For more info on the fix please see philipwalton/flexbugs#231

How has this been tested?

In Internet Explorer 11 on Windows 10 by applying the CSS directly in code inspector of the browser.

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[tofumatt]

I think it would be helpful to have before/after screenshots for this PR; I'm not exactly sure what it's meant to fix. When I checked out this branch in IE11 it seemed similar to the screenshots in the issue, and
#5791 (comment) still happened for me.

[webmandesign]

@tofumatt Thanks for the change.

I have put together a video of the fix applied directly onto installed Gutenberg plugin stylesheets. Check at https://www.dropbox.com/s/b9orj1mcltd3zaw/gutenberg-ie11-fixing-flex-align.mp4

Tested (and recorded) on Windows 10, IE11.

[brandonpayton]

@webmandesign, I think I see the disconnect. In my testing, this fix is working in IE11 on Windows 10 but not in IE11 on Windows 7.

[kjellr]

I think I see the disconnect. In my testing, this fix is working in IE11 on Windows 10 but not in IE11 on Windows 7.

@brandonpayton Good catch. Turned out the :after element required display: block to get it to appear that context. @webmandesign, I went ahead and added that, and fixed the conflict with master as well.

I think this should be good to go. Here are screenshots:

Before:

Editor:

Front end:

After:

Editor:

Front end:

Adding this didn't seem to have any negative effects on non-IE11 browsers as far as I could tell. That said, this could use one more set of 👀 before merging.

[catehstn]

No rush to get this merged in 4.5, so moving to 4.6.
@jasmussen maybe you could take a pass when you have a moment? Thank you!

[jasmussen]

I can confirm that this fixes the alignment of the text in IE11. Nice work!

However it introduces a regression with the placeholder for the cover block:

It's no longer vertically centered there. This is in all browsers.

However the following fixes it:

	// Prevents misplaced flex alignment in IE11.
	&::after {
		display: block;
		content: "";
		font-size: 0;
		min-height: inherit;

		// IE doesn't support flex so omit that.
		@supports (position: sticky) {
			content: none;
		}
	}

If you add that, I think we can ship this. Thanks for the PR!

[kjellr]

Good catch, @jasmussen! I pushed that change in 0954f43. Mind giving it another test?

[jasmussen]

I already tested this. I'm inclined to either approve, or get @tofumatt sanity check.

[webmandesign]

@kjellr @jasmussen Thank you guys for improving the code and making it work!

[tofumatt]

I think we need some context for the CSS hack but otherwise code seems fine to me.

[tofumatt]

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

[kjellr]

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.

[chrisvanpatten]

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.

[kjellr]

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

[catehstn]

@tofumatt I think your comments have been addressed, can we get this approved and merged now?

[jorgefilipecosta]

In my tests on IE the placeholder problem referred by @jasmussen still happens:

It does not happen in other browsers. I think we need a rule in the editor styles to avoid this behavior on the placeholder. The frond styles look correct 👍

[kjellr]

@jorgefilipecosta: That happens for all block placeholders in IE11, and isn't a regression from this PR. I don't believe we have a PR open to fix that this point, but the issue tracking it is #8607

The fix could likely be similar, but this PR is meant to just fix the vertical text alignment within the (non-placeholder) cover image block itself (both in the front and back end).

[jasmussen]

I think I agree with Kjell on this one. Unless we can find a quick fix for vertically centering the text in all placeholders in IE11, probably good to ship this as is.

IE 11 has to_work_, but it doesn't have to be perfect.

[tofumatt]

Awesome, works for me!

You said it yourself: good to ship as-is :-)

[kjellr]

🎉 Thanks, everyone!