IE11: cover image text and inline toolbar misplaced

[afercia]

In IE11, the cover image text and inline toolbar appear at the top instead of vertically centered:

For a list of known flexbox bugm see https://github.com/philipwalton/flexbugs

[kjellr]

I can reproduce. Also, note that the background behind the inline options for the title (Bold, Italic, Strikethrough, Link), has a visual issue as well. Not sure if it's related or not:

[webmandesign]

Hey guys,

The bug is being triggered by min-height applied on flexbox container in IE11. Fix seems to be pretty straightforward simply by applying aditional height styles. philipwalton/flexbugs#231

Have created #9196 pull request to fix this.

Regards,

Oliver

[webmandesign]

Actually, I've just retested it and it seems the better fix would be using ::after pseudo element philipwalton/flexbugs#231 (comment) to account for cases with larger cover image text.

Tested and works for me.

[brandonpayton]

Also, note that the background behind the inline options for the title (Bold, Italic, Strikethrough, Link), has a visual issue as well.

I played with this a bit and was able to avoid the visual issue by setting flex-shrink: 0 for direct children of .editor-rich-text__inline-toolbar. I don't know why this is necessary in IE11 though.

After making the entire toolbar visible no matter the width of the entered text, there was still an issue of centering it. The left edge of the toolbar was aligned with the left edge of the text field regardless of the justify-content: center property on the toolbar. It's possible IE11 won't center when the flex items overflow their container.

[kjellr]

Just noting that @ianbelanger79 came across this issue while testing the Twenty Nineteen theme. Would be great to have it fixed in Gutenberg for 5.0, rather than pushing an individual theme stylesheet fix.

WordPress/twentynineteen#269