WordPress.org

Make WordPress Core

Opened 4 weeks ago

Closed 3 weeks ago

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

Download all attachments as: .zip

Change History (16)

@ravipatel
4 weeks ago

Media element css changes

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


4 weeks ago

#2 @audrasjb
4 weeks ago

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

#3 @ravipatel
4 weeks ago

@audrasjb

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

1920x1080 - Screen resolution

@audrasjb
4 weeks ago

Trunk | Chrome Mac OSX: can't reproduce

#4 @SergeyBiryukov
4 weeks 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
4 weeks ago

  • Milestone changed from Awaiting Review to 5.6

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

#6 @sabernhardt
4 weeks 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
4 weeks ago

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

#7 @sabernhardt
4 weeks 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.


4 weeks ago

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


4 weeks ago

@sabernhardt
3 weeks 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.


3 weeks ago

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


3 weeks ago

#12 @antpb
3 weeks 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.