WordPress.org

Make WordPress Core

Opened 2 months ago

Closed 4 weeks ago

#48087 closed defect (bug) (fixed)

Internet Explorer 11: Image details buttons group layout is broken

Reported by: afercia Owned by: afercia
Milestone: 5.3 Priority: normal
Severity: normal Version: 5.3
Component: Media Keywords: has-screenshots has-patch commit dev-reviewed
Focuses: ui, accessibility Cc:
PR Number:

Description

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.

Attachments (10)

image details button group.png (67.8 KB) - added by afercia 2 months ago.
48087.diff (441 bytes) - added by afercia 2 months ago.
polyfill-error.png (17.7 KB) - added by sabernhardt 2 months ago.
syntax error in polyfill
Screenshot (45).png (8.1 KB) - added by afercia 5 weeks ago.
48087.2.diff (406 bytes) - added by afercia 5 weeks ago.
ie11-media-from-url-after-patch2.png (5.5 KB) - added by sabernhardt 5 weeks ago.
"Insert from URL" buttons after patch 48087.2.diff
ie11-media-from-url-after-patch2-custom-link.png (7.4 KB) - added by sabernhardt 5 weeks ago.
"Insert from URL" buttons with Custom URL input below, after patch
Video details example 5.2.png (24.6 KB) - added by afercia 5 weeks ago.
WordPress 5.2: Bottom padding ignored in IE 11
Video details example 5.3.png (21.4 KB) - added by afercia 5 weeks ago.
WordPress 5.3: Bottom padding ignored in IE 11 with only a few pixels difference
Video details example chrome.png (27.5 KB) - added by afercia 5 weeks ago.
WordPress 5.3: Bottom padding honored by modern browsers (Chrome)

Download all attachments as: .zip

Change History (31)

@afercia
2 months ago

#1 @afercia
2 months ago

  • Keywords has-patch added; needs-patch removed

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

Some quick testing in IE 11 would be nice :)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 months ago

#3 @afercia
2 months ago

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

#4 @sabernhardt
2 months ago

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

#5 @afercia
2 months ago

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

@sabernhardt
2 months ago

syntax error in polyfill

#6 @sabernhardt
2 months ago

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

#7 @afercia
2 months ago

  • Keywords commit added

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

#8 @afercia
2 months ago

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

In 46237:

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

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

#9 @afercia
2 months ago

  • Keywords commit removed

#10 @afercia
5 weeks ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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
5 weeks ago

#11 follow-up: @afercia
5 weeks ago

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

#12 @afercia
5 weeks ago

  • Keywords commit dev-feedback added

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

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


5 weeks ago

@sabernhardt
5 weeks ago

"Insert from URL" buttons after patch 48087.2.diff

@sabernhardt
5 weeks ago

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

#14 @sabernhardt
5 weeks ago

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.

Last edited 5 weeks ago by sabernhardt (previous) (diff)

#15 @afercia
5 weeks ago

@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
5 weeks ago

WordPress 5.2: Bottom padding ignored in IE 11

@afercia
5 weeks ago

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

@afercia
5 weeks ago

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

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 weeks ago

#17 @sabernhardt
4 weeks ago

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 :)

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


4 weeks ago

#19 in reply to: ↑ 11 @SergeyBiryukov
4 weeks ago

  • Keywords dev-reviewed added; dev-feedback removed

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.

#20 @SergeyBiryukov
4 weeks ago

Discovered #48392 while testing this :)

#21 @azaozz
4 weeks ago

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

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.

Note: See TracTickets for help on using tickets.