Try Gutenberg Callout: Positioning falls apart in IE11

[kjellr]

When viewed in IE11, the layout of the Try Gutenberg callout all collapses into the left column. Seems likely this is a CSS Grid issue.

To Reproduce:

1. Open IE11
2. Visit a site running 4.9.8
3. Take note of the Try Gutenberg Callout's appearance.

Tested with:
Windows 7, IE 11.0.9600.17420
WordPress 4.9.8

[ianbelanger]

Hi @kjellr,

I just tested this on Windows 10 machine using IE11 and IE10. I could not reproduce the issue that you are seeing. I wouldn't think that the OS would affect the way a browser renders the page, but maybe, I guess.

[ianbelanger]

IE11 Try Gutenberg Panel looks fine

[pbiron]

I can reproduce the problem on Windows 10 Pro in IE11 and IE10.

[Luciano Croce]

Replying to kjellr:

Tested with:
Windows 7, IE 11.0.9600.17420
WordPress 4.9.8

Update to IE11 11.0.9600.19035 via windowsupdate or visit ​https://browsehappy.com/

[kjellr]

@luciano-croce:

I updated to IE11 11.0.9600.19080 and the problem persists.
I tested on a fresh site as well and see the issue there.

[ianbelanger]

Please disregard my previous comment and screenshot. I was using Microsoft Edge with Dev Tools IE11 emulation. Using IE11 I can confirm the issue as well.

[Luciano Croce]

I have IE11 on Windows 7 and do not have this issue!

[ianbelanger]

I just updated to the latest version of IE11 and I am still seeing the Try Gutenberg sections overlapping each other. It has to do with IE11 not supporting all of the newer css grid specifications, see ​https://stackoverflow.com/questions/45786788/css-grid-layout-not-working-in-edge-and-ie-11-even-with-ms-prefix#answer-45787093

[belcherj]

I see the issue on IE 11.540.15063.0 on Windows 10. WordPress version 4.9.8.

I am using the Browserstack Windows 10 IE 11 vm.

[ryansommers]

Fixed in IE 11 using flexbox, grid with @supports

[ryansommers]

Here's a patch to fix this. Worth noting the Gutenberg panel isn't in origin/master, only origin/4.9, so that's what this diff is made from. My understanding is origin/master should be the trunk.

IE 11 is using flexbox, grid properties were moved into @supports.

44742.dif

[adamsilverstein]

@kjellr or @ianbelanger can you confirm this patch fixes the issue you were seeing?

[kjellr]

Working on my end!

Tested on IE11 11.0.9600.19080 on Windows 7
(As well as Chrome 69.0.3497.100 + Safari 12.0 on Mac OS 10.14)

[ocean90]

#45034 was marked as a duplicate.

[adamsilverstein]

In 43674:

Try Gutenberg callout: improve formatting for Internet Explorer 11.

Correct an issue where the layout of the "Try Gutenberg" callout added in #41316 falls apart under IE11.

Props kjellr, ianbelanger, pbiron, Luciano Croce, belcherj, ryansommers.
Fixes #44742.

[pento]

Moving this out of the 4.9.9 milestone, as it will ultimately be reverted in #45063.

[SergeyBiryukov]

Having a fixed ticket without a milestone doesn't seem right, changing the resolution accordingly.