WordPress.org

Make WordPress Core

Opened 7 weeks ago

Last modified 5 weeks ago

#48378 assigned defect (bug)

Firefox and Internet Explorer 11: Media modal controls section cut off at larger window sizes

Reported by: sabernhardt Owned by: afercia
Milestone: 5.4 Priority: normal
Severity: normal Version: 5.3
Component: Media Keywords: needs-patch
Focuses: ui Cc:
PR Number:

Description

When using the "Insert from URL" feature for adding images in WordPress 5.3, the bottom "media-toolbar" container can cover the last settings controls in the scrolling container.

On that screen, the gray border line covers the "Link To" buttons group if:

  1. the window width is at least 783 pixels and
  2. either the "Image URL" or "None" button is selected.

At 782 and narrower, there is a bottom margin on those buttons that can provide just enough space. (Other browsers give plenty more space with a 32px bottom padding.)

Steps to reproduce (inserting image from URL):

  • Use the Classic Editor.
  • Edit a post.
  • Click the "Add Media" button.
  • Select "Insert from URL" from the side menu (the menu is found on the side if the window is at least 783 pixels wide).
  • Paste a URL into the field so the UI controls appear. https://via.placeholder.com/200
  • Scroll to the bottom of the settings container, and select each button.

This overlap may be found also on the Video Details screen, before a subtitle track is assigned. (Use the Video widget and click the "Edit Video" button to reach that screen.)

See additional comments on ticket #48087: https://core.trac.wordpress.org/ticket/48087#comment:15

Attachments (3)

ie11-media-from-url.png (5.5 KB) - added by sabernhardt 7 weeks ago.
"Link To" buttons hidden behind border line
ie11-media-from-url-custom-link.png (7.4 KB) - added by sabernhardt 7 weeks ago.
"Link To" buttons with Custom URL input below
48378.diff (389 bytes) - added by afercia 7 weeks ago.

Download all attachments as: .zip

Change History (9)

@sabernhardt
7 weeks ago

"Link To" buttons hidden behind border line

@sabernhardt
7 weeks ago

"Link To" buttons with Custom URL input below

#1 @SergeyBiryukov
7 weeks ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.4

#2 @afercia
7 weeks ago

After some research, this appears to be an area where browser implementations differ due to lack of clarity in the old CSS 2.1 spec.

As mentioned in ticket:48087#comment:15 the element with overflow: auto has a bottom padding of 32 pixels:

  • this padding is honored only by webkit browsers
  • not honored by IE 11
  • not honored by latest Firefox as well

Relevant discussion on the w3c/csswg-drafts GitHub:

[css-overflow-3] Clarify padding-bottom in overflow content
https://github.com/w3c/csswg-drafts/issues/129
Created on 21 May 2016: discussion is still ongoing and it's not clear to me what the consensus is.

There's a related (closed) Firefox ticket on the Mozilla tracker that was opened 8 years ago on April 2012:
https://bugzilla.mozilla.org/show_bug.cgi?id=748518

Thus, browser implementations still differ today.

Seems the best option is to change the WordPress implementation and not set the padding on the scrolling element. We could try to:

  • either set a bottom margin on the last child
  • or use an ::after pseudo element with the desired height to make room at the bottom of the scrolling element
  • either way, the 32 pixels value seems arbitrary to me: more a magic number rather than based on something meaningful and should probably be reduced

@afercia
7 weeks ago

#3 @afercia
7 weeks ago

48378.diff implements the first part mentioned on ticket:48087#comment:15 by making the URL field scroll into view when clicking on the "Custom URL" button.

#4 @afercia
7 weeks ago

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

#5 @afercia
7 weeks ago

  • Summary changed from Internet Explorer 11: Media modal controls section cut off at larger window sizes to Firefox and Internet Explorer 11: Media modal controls section cut off at larger window sizes

#6 @sabernhardt
5 weeks ago

I see Edge does not honor the bottom margin either.

Another option is to add a value to the bottom property instead of bottom padding. The top value could also increase to more than 70px (the span height for the URL input totals 82 pixels at the intended font size).

Note: See TracTickets for help on using tickets.