Make WordPress Core

Opened 6 years ago

Last modified 5 years ago

#43641 new defect (bug)

Media controls in the media grid are too wide

Reported by: johnbillion's profile johnbillion Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.9
Component: Media Keywords: needs-patch
Focuses: Cc:

Description

The audio and video player that's shown when viewing an individual media item in the media grid displays a control bar which is too wide for its container.

Tested in latest Chrome, Firefox, and Safari on macOS.

Attachments (6)

media-video.png (893.3 KB) - added by johnbillion 6 years ago.
Screenshot
43641.diff (489 bytes) - added by Hafiz 5 years ago.
Screen Shot 2018-10-01 at 5.52.35 PM.png (82.4 KB) - added by Hafiz 5 years ago.
tested in Safari
Screen Shot 2018-10-01 at 5.54.26 PM.png (659.1 KB) - added by Hafiz 5 years ago.
tested in Chrome
Screen Shot 2018-10-01 at 5.56.25 PM.png (672.9 KB) - added by Hafiz 5 years ago.
tested in Firefox
safari.png (102.7 KB) - added by Hafiz 5 years ago.
Just noticed that my screenshot for Safari above doesn't show the media controls; on Safari they get hidden automatically once the cursor stops hovering on them. Here's the right screenshot.

Change History (8)

@johnbillion
6 years ago

Screenshot

#1 @johnbillion
6 years ago

  • Version set to 4.9

Broken in 4.9.

@Hafiz
5 years ago

@Hafiz
5 years ago

tested in Safari

@Hafiz
5 years ago

tested in Chrome

@Hafiz
5 years ago

tested in Firefox

@Hafiz
5 years ago

Just noticed that my screenshot for Safari above doesn't show the media controls; on Safari they get hidden automatically once the cursor stops hovering on them. Here's the right screenshot.

#2 @pento
5 years ago

I'm only able to reproduce this behaviour when I disable concatenation with load-styles.php.

There are two styles here that depend on the load order:

In media-views.css, we have this rule:

.media-modal * {
    box-sizing: content-box;
}

In mediaelementplayer-legacy.min.css we have this rule:

.mejs-container, .mejs-container * {
    box-sizing: border-box;
}

With concatenation disabled, mediaelementplayer-legacy.min.css loads before media-views.css, causing the incorrect behaviour.

With concatenation enabled, media-views.css is concatenated, but mediaelementplayer-legacy.min.css is not. The load-styles.php with media-views.css is loaded before mediaelementplayer-legacy.min.css, which applies the CSS rules in the correct order.

Note: See TracTickets for help on using tickets.