WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#42545 closed defect (bug) (fixed)

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

Reported by: Clorith Owned by: ryelle
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.9
Component: Help/About Keywords: has-patch dev-reviewed commit
Focuses: ui Cc:
PR Number:

Description

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.

Attachments (5)

Pasted image at 2017_11_14 05_07 PM.png (110.3 KB) - added by Clorith 2 years ago.
42545.diff (5.0 KB) - added by ryelle 2 years ago.
42545-edge.PNG (50.1 KB) - added by Clorith 2 years ago.
42545.2.diff (5.3 KB) - added by ryelle 2 years ago.
42545-edge.2.PNG (35.9 KB) - added by Clorith 2 years ago.

Download all attachments as: .zip

Change History (20)

#1 @ocean90
2 years ago

  • Component changed from Administration to Help/About
  • Focuses ui added; administration removed
  • Milestone changed from Awaiting Review to 4.9
  • Version changed from trunk to 4.9

#2 @melchoyce
2 years ago

@ryelle is looking at this.

#3 @melchoyce
2 years ago

  • Owner set to ryelle
  • Status changed from new to assigned

@ryelle
2 years ago

#4 @ryelle
2 years ago

  • Keywords has-patch added; needs-patch removed

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.

#5 @Clorith
2 years ago

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.

This ticket was mentioned in Slack in #core by clorith. View the logs.


2 years ago

@Clorith
2 years ago

#7 @Clorith
2 years ago

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.

#8 @melchoyce
2 years ago

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

#9 @Clorith
2 years ago

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

@ryelle
2 years ago

#10 @ryelle
2 years ago

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

@Clorith
2 years ago

#11 @Clorith
2 years ago

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!

#12 @melchoyce
2 years ago

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?

#13 @SergeyBiryukov
2 years ago

  • Keywords dev-reviewed commit added

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.

#14 @westonruter
2 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#15 @westonruter
2 years ago

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

Note: See TracTickets for help on using tickets.