WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 4 days ago

#40843 reopened defect (bug)

Twenty Seventeen: broken MediaElement.js player icons on hover

Reported by: celloexpressions Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 4.7
Component: Bundled Theme Keywords: has-screenshots has-patch
Focuses: ui Cc:

Description

Color schemes seem to cause issues with MediaElement.js audio and video player icons, erasing the icons on hover. Likely also related to button styling.

Attachments (5)

twentyseventeen-broken-mediaelement-button-hover.PNG (1.6 KB) - added by celloexpressions 4 months ago.
Hover state on play/pause icon, normal on audio/mute button.
audioplayer.gif (46.0 KB) - added by menakas 4 months ago.
Not able to reproduce with dark color scheme (of the Twenty Seventeen theme)
audioplayer1.gif (54.7 KB) - added by menakas 4 months ago.
Not able to reproduce with light color scheme (of the Twenty Seventeen theme)
40843.diff (1.5 KB) - added by xkon 4 days ago.
Fixes button:hover color on me-js
40843.2.diff (1.6 KB) - added by xkon 4 days ago.
Fixes button:hover background on me-js container

Download all attachments as: .zip

Change History (9)

@celloexpressions
4 months ago

Hover state on play/pause icon, normal on audio/mute button.

@menakas
4 months ago

Not able to reproduce with dark color scheme (of the Twenty Seventeen theme)

@menakas
4 months ago

Not able to reproduce with light color scheme (of the Twenty Seventeen theme)

#1 @menakas
4 months ago

  • Keywords reporter-feedback added

Hi @celloexpressions,
I am not able to reproduce this with the various color schemes of the theme - light, dark and custom. I have attached gifs for the same. Can you give some more pointers that could help me reproduce this defect?

#2 @davidakennedy
3 months ago

  • Milestone 4.8.1 deleted
  • Resolution set to worksforme
  • Status changed from new to closed

Hi @celloexpressions – thanks for creating this issue!

Like @menakas, I wasn't able to reproduce this issue. I tried on all color types, light, dark and custom. Everything worked as normal for me. I also double checked hover styles against Twenty Sixteen.

I'm going to close this. If I missed something, let me know, and we can reopen it and fix.

#3 @celloexpressions
8 weeks ago

  • Keywords reporter-feedback removed
  • Milestone set to Future Release
  • Resolution worksforme deleted
  • Status changed from closed to reopened

This is an issue with custom color schemes, not light/dark, and only in the customize preview. Looks like the cascade is broken here with .colors-custom button:hover.

@xkon
4 days ago

Fixes button:hover color on me-js

#4 @xkon
4 days ago

  • Keywords has-patch added; needs-patch removed

40843.diff skips the me-js play button from applying the custom background colors.

Further information: As the button background is .svg based, by adding a custom color through an extra .css or Customizr was resulting on overwriting the .svg element. That being said there's no way to target the me-js specific .svg as installations are different on every WordPress. This patch uses a simple trick with :not() to 'skip' the me-js buttons while selecting new colors.

It works fine on my tests but further tests on different spec pcs are always welcome.

Concerning browser support on not(): https://www.w3schools.com/cssref/sel_not.asp


40843.2.diff skips all buttons of the .mejs-container.

Last edited 4 days ago by xkon (previous) (diff)

@xkon
4 days ago

Fixes button:hover background on me-js container

Note: See TracTickets for help on using tickets.