Make WordPress Core

Opened 3 years ago

Closed 2 years ago

#42902 closed defect (bug) (invalid)

CSS bug in mediaelement

Reported by: skoen Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Media Keywords: reporter-feedback
Focuses: Cc:


I have noticed a weird css bug in the css for the internal HTML5 player.
It seems that the margin is wrong, and the height is set to 100% for some reason.

See provided screenshot:

This bug shows in both Firefox and Google Chrome.

Change History (6)

#1 @skoen
3 years ago

I was able to fix this temporary with this css-fix in my style.css for the theme:

.mejs-controls .mejs-time-rail .mejs-time-loaded, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    height: 8px !important;
    margin-top: 16px !important;

But it isn't exactly a responsive solution.

Last edited 3 years ago by skoen (previous) (diff)

#2 @Presskopp
3 years ago

Is this repeatable using a standard theme without plugins? How/where did you embed the media file?

#4 @Presskopp
2 years ago

  • Keywords reporter-feedback added

#5 @jamosova
2 years ago

Tested this in Chrome 69 on macOS (High Sierra) and the default theme Twenty Seventeen. Could not reproduce (see screenshot below):


I would recommend theme and plugins conflict testing here. This doesn't seem to be a bug.

The best way to determine if the issue is being caused by a theme and/or plugin is to do the following:

  1. Temporarily switch your theme back to the Twenty Seventeen Theme: https://wordpress.org/themes/twentyseventeen/.
  2. Disable all plugins.
  3. Test to see if the issue has been resolved.

If that resolves the issue, then slowly re-enable features until you find the one that's causing the conflict. If it doesn’t resolve the issue, check for browser console errors - anything interesting there?

Note that switching to another theme will not delete data and you will be able to revert back to your original theme without any issue after testing is done. Your site will simply have a different display during the test.

#6 @pento
2 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed
  • Version 4.9.1 deleted
Note: See TracTickets for help on using tickets.