Bug: Firefox PiP button activates when clicked through on settings menu

[daniemo2]

On Firefox, this can be reproduced on the 'Toggling menu-item children' of the settings menu example: https://www.media-chrome.org/docs/en/examples/settings-menu

If I open the settings menu, and click somewhere that is in the same position as the PiP button, the video will move to PiP and the menu click will be ignored, despite (I believe) the menu being above the button.

Strangely, it seems that if the menu has a solid opacity background, it avoids this behaviour. However, a slightly transparent background is preferred.

[ronalduQualabs]

@daniemo2 I could reproduce it, thanks for the information about the background I'm already looking for a solution.

[ronalduQualabs]

@daniemo2

Checking this error I discovered that it is more complicated than it seems. Firefox has its own picture in picture system in which from its interface they add that floating button that currently intervenes with our clicks in the media-chrome interface.

Besides that our picture in picture implementation does not work because firefox does not support the picture-in-picture api.

I'm still investigating ways to make the button not interrupt menu clicks without the need to change the color to solid since in custom players the error could return.

[daniemo2]

Thanks for continuing to investigate @ronalduQualabs! I noticed that youtube doesn't suffer from the same issue, despite having transparent menus. I know they're not using Media Chrome but perhaps you can see if there's anything they've done to overcome the issue - although I couldn't see anything obvious.

[daniemo2]

Sorry, accidentally clicked the wrong button, please reopen.

[ronalduQualabs]

@daniemo2 That's exactly what I trying to figure out how Youtube did that. I'll let you know the updates

[ronalduQualabs]

After a research we discover that Firefox uses their own PiP system adding a toggle overlaying videos and other elements if they dont have background color to 100% and opacity to 1 this make our menus unclickeable if they are under this toggle.

We resolve this issue by adding a css class for background solid color that only applies into firefox and we created this ticket for get a better solution from mozilla them since I also discover Youtube had the same problem but they created an exception that prevent this UX bug for elements with transparencies from 0.7 or higher for them identifying its youtube by the domain.

For now this can be partially solved and build in the new version of media-chrome 4.6.0