WordPress.org

Make WordPress Core

Opened 10 months ago

Closed 6 months ago

#48378 closed defect (bug) (fixed)

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: has-patch has-screenshots commit
Focuses: ui, css Cc:

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 (9)

ie11-media-from-url.png (5.5 KB) - added by sabernhardt 10 months ago.
"Link To" buttons hidden behind border line
ie11-media-from-url-custom-link.png (7.4 KB) - added by sabernhardt 10 months ago.
"Link To" buttons with Custom URL input below
48378.diff (389 bytes) - added by afercia 10 months ago.
48378 01.png (178.7 KB) - added by afercia 6 months ago.
48378 02.png (141.3 KB) - added by afercia 6 months ago.
48378.2.diff (2.5 KB) - added by afercia 6 months ago.
edit-image-left-panel-firefox.png (141.1 KB) - added by sabernhardt 6 months ago.
image editor modal left panel
48378.3.diff (3.4 KB) - added by afercia 6 months ago.
media toolbar glitch.jpg (276.9 KB) - added by afercia 6 months ago.

Download all attachments as: .zip

Change History (21)

@sabernhardt
10 months ago

"Link To" buttons hidden behind border line

@sabernhardt
10 months ago

"Link To" buttons with Custom URL input below

#1 @SergeyBiryukov
10 months ago

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

#2 @afercia
10 months 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
10 months ago

#3 @afercia
10 months 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
10 months ago

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

#5 @afercia
10 months 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
10 months 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).

#7 @afercia
6 months ago

There are a couple more places where a bottom padding is set to an element with overflow: auto, namely:

  • the sidebar in the media modal 3 columns view
  • the right sidebar in the modal with the image editor

See screenshots below, where the area that should have padding is highlighted in red. In all these cases, Firefox and Internet Explorer ignore the padding. To test, compare the rendering in Chrome and Firefox (or IE on Windows).

@afercia
6 months ago

@afercia
6 months ago

@afercia
6 months ago

#8 @afercia
6 months ago

  • Keywords has-patch has-screenshots commit added; needs-patch removed

48378.2.diff builds on the previous patch and:

  • checks the input exists before using a DOM method on it (scrollIntoView())
  • uses a CSS after pseudo element instead of padding-bottom to reserve some space at the bottom of the affected elements

For the CSS part: in this specific case I opted to repeat the same ruleset for each selector, to make very clear why it is used and also added inline comments accordingly.

Looks good for commit to me. Will wait till Beta 1 tomorrow to give some time for anyone willing to test.

Last edited 6 months ago by afercia (previous) (diff)

@sabernhardt
6 months ago

image editor modal left panel

#9 @sabernhardt
6 months ago

@afercia Good catch with checking the DOM and including additional elements. Perhaps we could add one more set of changes for the left panel in the image editor modal:
.media-modal .imgedit-wrap .imgedit-panel-content::after

@afercia
6 months ago

#10 @afercia
6 months ago

48378.3.diff:

  • simplifies the alternate CSS method where it makes sense, by using just a bottom margin
  • adds some bottom spacing to the image editor left panel as well
  • removes a couple leftovers from [40428]
  • fixes an annoying visual glitch, where the media modal content is visible behind the bottom toolbar border (see attached screenshots)

#11 @afercia
6 months ago

  • Focuses css added

#12 @afercia
6 months ago

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

In 47266:

Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers.

Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method.

  • uses a CSS after pseudo element or simply a bottom margin to reserve some bottom spacing
  • removes a couple leftovers from [40428]
  • fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border

Props sabernhardt, afercia.
See #40152.
Fixes #48378.

Note: See TracTickets for help on using tickets.