WordPress.org

Make WordPress Core

#51685 closed defect (bug) (fixed)

Media Element CSS Issue : Some layout display crop

Reported by: ravipatel Owned by: sabernhardt
Milestone: 5.6 Priority: normal
Severity: normal Version: 5.6
Component: Media Keywords: has-patch
Focuses: ui, css Cc:

Description

Audio Media Element CSS Issue

Issue :

https://prnt.sc/vamkqr
https://prnt.sc/vamlg4

Solution :

https://prnt.sc/vaml1c

Attachments (4)

51685-mediaelement.patch (22.9 KB) - added by ravipatel 13 months ago.
Media element css changes
Capture d’écran 2020-11-02 à 22.42.34.png (133.7 KB) - added by audrasjb 13 months ago.
Trunk | Chrome Mac OSX: can't reproduce
51685.1.patch (401 bytes) - added by sabernhardt 13 months ago.
box-sizing: content-box for mejs-time containers
51865-screenshot-collection-chrome-windows.jpg (603.1 KB) - added by sabernhardt 13 months ago.
collection of screenshots in Chrome/Windows, before and after applying 51685.1.patch

Download all attachments as: .zip

Change History (16)

@ravipatel
13 months ago

Media element css changes

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


13 months ago

#2 @audrasjb
13 months ago

@ravipatel I can't reproduce the issue on Chrome/OSX. Which browser/OS are you using?

#3 @ravipatel
13 months ago

@audrasjb

i have checked both Firefox and chrome (Version 86.0.4240.183). Both browser on same issue

1920x1080 - Screen resolution

@audrasjb
13 months ago

Trunk | Chrome Mac OSX: can't reproduce

#4 @SergeyBiryukov
13 months ago

Hi there, thanks for the ticket.

Just noting that MediaElement.js is an external library, any suggested changes to its files should be submitted upstream: https://github.com/mediaelement/mediaelement.

If the fix is included in a future version of MediaElement.js, it will be in WordPress core as well as part of updating the library, there is no need to have an extra Trac ticket for that.

If the issue only exists in WordPress admin, perhaps some of the admin CSS should be adjusted instead.

#5 @SergeyBiryukov
13 months ago

  • Milestone changed from Awaiting Review to 5.6

Seems related to [49343], moving to the milestone for investigation.

#6 @sabernhardt
13 months ago

  • Keywords needs-refresh added
  • Owner set to sabernhardt
  • Status changed from new to assigned

Yes, I see that in Firefox/Windows with trunk but not 5.5.2. [49343] overrides content-box on .mejs-time.

I'd rather not edit the height value, but I can check if there's a better option than

.wp-core-ui .mejs-time {
    box-sizing: content-box;
}

@sabernhardt
13 months ago

box-sizing: content-box for mejs-time containers

#7 @sabernhardt
13 months ago

  • Keywords needs-refresh removed

Caused by both the box-sizing: border-box and a hidden overflow, Windows browsers Firefox, Chrome and Edge (not IE) cut off the bottom of the time value on the Media attachment page and in the Attachment Details dialog.

51685.1.patch resets the time container to content-box, to match the front end.

I also considered showing the overflow instead, but then the horizontal spacing is off in the Attachment Details dialog.

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


13 months ago

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


13 months ago

@sabernhardt
13 months ago

collection of screenshots in Chrome/Windows, before and after applying 51685.1.patch

This ticket was mentioned in Slack in #core-media by hellofromtonya. View the logs.


13 months ago

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


13 months ago

#12 @antpb
13 months ago

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

In 49550:

Media: Adjust box-sizing for audio players.

Fix cropped container around playhead time in audio player.

Props ravipatel, sabernhardt, audrasjb, SergeyBiryukov,
Fixes #51685

Note: See TracTickets for help on using tickets.