[wp-trac] [WordPress Trac] #47457: Fix the mediaelements player controls bar sizing

[WordPress Trac]

#47457: Fix the mediaelements player controls bar sizing
-------------------------+-------------------------------------------------
 Reporter:  afercia      |      Owner:  (none)
     Type:  defect       |     Status:  new
  (bug)                  |
 Priority:  normal       |  Milestone:  5.3
Component:  Media        |    Version:
 Severity:  normal       |   Keywords:  needs-patch has-screenshots good-
  Focuses:  ui           |  first-bug
-------------------------+-------------------------------------------------
 In the media views, the mediaelements player controls bar exceeds the
 width of the video. See attached screenshot.

 This happens because the media views stylesheet switches everything to
 `content-box` sizing, while it appears the mediaelements player expects
 `border-box`.

 This CSS rule in `media-views.css`:


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


 conflicts with this CSS rule in `mediaelementplayer-legacy.min.css`:


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


 Explicitly setting `box-sizing: border-box;` with some higher specificity
 to the mediaplayer `.mejs-controls` element fixes the problem.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47457>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform