CSS bug in mediaelement

[skoen]

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.

[skoen]

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.

[Presskopp]

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

[newventureswest]

I'm having a similar issue: ​https://www.evernote.com/l/AAL0fZsZMR9MnbWuoXnV2OVATlXwABZXNrg

[jamosova]

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

​https://cloudup.com/c-I85rQeUqV

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.