CSS-Grid on about.php needs polyfill for Internet Explorer

[Clorith]

The about.php page for 4.9 uses CSS-grid, which is amazing, but unfortunately not available in IE 11 and below.

We still support IE 11, so we need to find a polyfill for this.

[melchoyce]

@ryelle is looking at this.

[ryelle]

As @melchoyce mentioned in slack, the issues here are more to do with the combo of the JS for docking the titles + grid compatibility issues. Technically grid is supported in IE11, so we're keeping the grid for the layout of header + section, but switching to a flex layout for the items themselves. This, plus some updates to the title-length-detection javascript seems to fix the layout issues in IE11 and Edge (by my testing on browserstack) - it would be great to confirm that with "real" use of IE :)

See 42545.diff​ for the patch. I also ran grunt postcss:core to make sure the prefixes were in place.

[Clorith]

Looks good in IE11 on native Windows, I'm unable to test in the most widespread version of Edge, as I am on the Fall Creators version which didn't have issues originally.

[Clorith]

Tested with Edge, titles don't go above images on smaller viewports, they instead overlay the section images, but the bigger issues from the initial screenshot are not there now on wider viewports.

[melchoyce]

Thanks for all your testing @Clorith. Do you know at what browser width the titles start to overlap?

[Clorith]

It's when the 782px breakpoint kicks in and tries to lay the titles above the section

[ryelle]

42545.2.diff​ should take care of the overlapping headlines on the images.

[Clorith]

From 904px and down to the breakpoint at 782 I'm seeing text overlapping left to right from the headers (see screenshot above), but the headers above are good now!

[melchoyce]

Chatted with @Clorith in Slack (​https://wordpress.slack.com/archives/C02RQBWTW/p1510695911000002); we agree that the overlap in this specific size is pretty minor overall, so we're going to go ahead with the latest patch.

Can I get one more committer +1?

[SergeyBiryukov]

Tested 42545.2.diff​ with Microsoft Edge 38.14393.1066.0 / Microsoft EdgeHTML 14.14393.

Reproduced the same overlap as in 42545-edge.2.PNG​, looks good to me otherwise.

[westonruter]

In 42181:

About Page: Fix issue with overlapping images and text on IE11 and Edge 15.

Props Clorith, ryelle, afercia, la-geek, SergeyBiryukov.
See #42514.
Fixes #42545.

[westonruter]

In 42182:

About Page: Fix issue with overlapping images and text on IE11 and Edge 15.

Props Clorith, ryelle, afercia, la-geek, SergeyBiryukov.
See #42087.
Fixes #42545 for 4.9