Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#44742 closed defect (bug) (wontfix)

Try Gutenberg Callout: Positioning falls apart in IE11

Reported by: kjellr's profile kjellr Owned by: adamsilverstein's profile adamsilverstein
Milestone: Priority: normal
Severity: normal Version: 4.9.8
Component: Administration Keywords: has-screenshots
Focuses: ui Cc:

Description

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.

https://cldup.com/XJySbVJ6KT-3000x3000.png

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

Attachments (3)

44742-try-gutenberg-ie.PNG (72.8 KB) - added by ianbelanger 6 years ago.
IE11 Try Gutenberg Panel looks fine
44742-fix-try-gutenberg-panel-IE11.png (107.6 KB) - added by ryansommers 6 years ago.
Fixed in IE 11 using flexbox, grid with @supports
44742.dif (2.6 KB) - added by ryansommers 6 years ago.

Download all attachments as: .zip

Change History (21)

#1 @ianbelanger
6 years ago

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
6 years ago

IE11 Try Gutenberg Panel looks fine

#2 @pbiron
6 years ago

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

#3 in reply to: ↑ description @Luciano Croce
6 years ago

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/

Last edited 6 years ago by Luciano Croce (previous) (diff)

#4 @kjellr
6 years ago

@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.

Last edited 6 years ago by kjellr (previous) (diff)

#5 @ianbelanger
6 years ago

  • Keywords needs-patch added; needs-testing removed

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.

#6 @Luciano Croce
6 years ago

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

#7 @ianbelanger
6 years ago

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

#8 @SergeyBiryukov
6 years ago

  • Component changed from General to Administration
  • Milestone changed from Awaiting Review to 4.9.9

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


6 years ago

#10 @belcherj
6 years ago

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.

#11 @adamsilverstein
6 years ago

  • Owner set to adamsilverstein
  • Status changed from new to reviewing

@ryansommers
6 years ago

Fixed in IE 11 using flexbox, grid with @supports

@ryansommers
6 years ago

#12 @ryansommers
6 years ago

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

Fixed in IE 11 using flexbox, grid with @supports

Last edited 6 years ago by ryansommers (previous) (diff)

#13 @adamsilverstein
6 years ago

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

#14 @kjellr
6 years ago

Working on my end!

https://cldup.com/3OJl9zykJk.png

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)

#15 @ocean90
6 years ago

#45034 was marked as a duplicate.

#16 @adamsilverstein
6 years ago

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

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.

#17 @pento
6 years ago

  • Milestone 4.9.9 deleted

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

#18 @SergeyBiryukov
6 years ago

  • Keywords needs-patch removed
  • Resolution changed from fixed to wontfix

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

Note: See TracTickets for help on using tickets.