Firefox Desktop and Mobile - Settings Menu not showing / correctly - Default Settings

[natesct]

Current Behavior:

Setup a default audio layout
Open FireFox Desktop - Click on Settings (not visible)
Change to Mobile View - Click on Settings (only playback and accessibility is viewable not Audio menu item)

Edge, Chrome all working fine.

Expected Behavior:

Expect to see the default Settings Menu in Deskop and Mobile

Steps To Reproduce:

1. Setup a Default Audio Player
2. Open FF Desktop and Mobile Views

[pzanella]

Hi @natesct,
I've reproduced the issue on MacOS Sequoia 15.7.1 and Firefox 144.0.2 when running locally.
After several manual tests, I found the cause: the problem is triggered by the backdrop-filter CSS rule.
I fixed it on #1717.
I hope this is useful for you, let me know.

[wplit]

Interestingly I don't see the same issue described when viewing in Firefox on Mac.

I just updated to the very latest versions also, and still see no issue.

[pzanella]

Hi @wplit,
thank you for your feedback.
I’ve reproduced this issue when running the React sandbox locally.
I clicked the settings button — the component was mounted, but it wasn’t visible in Firefox.
Here’s a screenshot (flex container activated):

Here’s another screenshot with the following CSS rule (packages/vidstack/styles/player/default/menus.css):

@-moz-document url-prefix() {
  :where(.vds-menu-items[data-root]) {
    backdrop-filter: none;
  }
}

Let me know thank you.