Internet Explorer 11: Image details buttons group layout is broken

[afercia]

In the media modal dialog > "Image Details" frame, the buttons group for the alignment setting is so shrinked that the buttons are barely usable. See attached screenshot.

At first glance, this appears to be a regression in trunk after the changes to all the media views form elements (and related CSS selectors adjustments) from [45499] / #47122.

The fix appears simple, patch incoming.

Also to note: this seems to be the only reported breakage so far after the extensive changes in [45499] / #47122.

[afercia]

48087.diff​ should be enough to fix the layout in IE 11.

Some quick testing in IE 11 would be nice :)

[sabernhardt]

@afercia I volunteered to test this, but unfortunately I can't replicate the problem to know whether it would be fixed. The buttons were normal for me, even at a different zoom and at different browser widths.

Internet Explorer: version 11 (11.356.18362.0)
WordPress: both 5.2.3 and the very latest (using the Beta Tester plugin, not running a build version)
Classic Editor: 1.5

Hopefully someone else can test.

[afercia]

@sabernhardt thanks for testing! Yup, the bug happens only on trunk. I don't know if the Beta Tester plugin gets latest trunk.

[sabernhardt]

syntax error in polyfill

[sabernhardt]

@afercia I was able to set up the trunk on my PC today, and the patch does fix the button widths in Internet Explorer 11 without changing appearance in Firefox, Chrome or Edge.

Side note: there is a syntax error with a polyfill script in IE11, which makes me question whether that might have caused the problem in the first place. (See line 20 of wp-polyfill-formdata.js)

[afercia]

@sabernhardt thanks :) Yes, the script error is a known (I think unrelated) issue, see #46110.

[afercia]

In 46237:

Media: Fix buttons group layout for Internet Explorer 11 after [45499].

Props sabernhardt, afercia.
See #47122.
Fixes #48087.

[afercia]

Reopening for a minor glitch in IE 11.

Other button groups in the media views need the same simple fix from [46237], see for example the button groups in the "Insert from URL" media frame (see screenshot below). Patch incoming.

[afercia]

Some testing of 48087.2.diff​ in Internet Explorer 11 would be nice :)

• use the Classic Editor plugin
• edit a post
• click add Media
• go to "Insert from URL"
• paste into the field this: https://via.placeholder.com/200 so the UI controls appear
• check the button groups look OK in IE 11

[afercia]

Being in Release Candidate period, 48087.2.diff​ needs a sign-off from another core committer.

[sabernhardt]

"Insert from URL" buttons after patch 48087.2.diff

[sabernhardt]

"Insert from URL" buttons with Custom URL input below, after patch

[sabernhardt]

I can confirm that 48087.2.diff properly expands the width of those buttons for me in Internet Explorer 11. (I also checked the format and preload buttons for Audio and Video screens, and I did not see a problem with those either before or after this patch.)

Side note: I'm not able to scroll further and see the bottom line of the Link To buttons at widths from 783px wide and larger (when either "Image URL" or "None" is selected). The button border seems to be covered by the border for the toolbar container. When the window is 782 pixels or narrower, those buttons have a bottom margin of 4 pixels, but they have no margin at larger widths.

If we're willing to fix the button margin/spacing immediately as well, the safest method might be adding that bottom margin to this specific group of buttons at all screen/window sizes, for all browsers.

.wp-core-ui .link-to .button {
	margin-bottom: 4px;
}

If that part should be revisited later instead, I'd suggest reconsidering the float property on the fieldsets or another change— but not now.

The custom URL input touches that border line, which could be acceptable as-is.

[afercia]

@sabernhardt thanks for testing!

Side note: I'm not able to scroll further and see the bottom line of the Link To buttons

Yep, I noticed that as well. Seems to me unrelated to changes introduced in 5.3 and I can reproduce it also in 5.2, even if there's a few pixel difference. Theoretically, the modal content has a bottom padding of 32 pixels that, for some reasons, IE11 decides to ignore. See screenshots attached below. It would be great to create a new ticket and address this glitch in the next minor release.

One more difference is that in 5.3 the URL field received focus after the "Custom URL" was clicked thus the input field came "into view". We removed most of the programmatically managed focus in #43169 because it's not great for accessibility and generally based on the assumption of a specific user flow. We could consider to use scrollIntoView() or just place the input field on the right. Good to explore in a new ticket :)

[afercia]

WordPress 5.2: Bottom padding ignored in IE 11

[afercia]

WordPress 5.3: Bottom padding ignored in IE 11 with only a few pixels difference

[afercia]

WordPress 5.3: Bottom padding honored by modern browsers (Chrome)

[sabernhardt]

Ticket #48378 is available to address the spacing issue.

But we would still need a second Core Committer to agree on correcting the width for these buttons with patch 48087.2.diff :)

[SergeyBiryukov]

Replying to afercia:

Some testing of 48087.2.diff​ in Internet Explorer 11 would be nice :)

• use the Classic Editor plugin
• edit a post
• click add Media
• go to "Insert from URL"
• paste into the field this: https://via.placeholder.com/200 so the UI controls appear
• check the button groups look OK in IE 11

Tested using the steps above, the patch works as expected here.

[SergeyBiryukov]

Discovered #48392 while testing this :)

[azaozz]

In 46567:

Media: After [46237] add the same fix to the .button-group on the "Insert form URL" screen in the media modal.

Props afercia, sabernhardt.
FIxes #48087.