Skip to content

Conversation

@pzanella
Copy link

@pzanella pzanella commented Oct 30, 2025

Related:

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

Description:

Resolves menu invisibility in Firefox by disabling the problematic backdrop-filter property that causes rendering issues with positioned elements in Firefox's engine.

Problem:

  • Settings and chapters menus were invisible in Firefox desktop browser
  • Menus were present in DOM but not visually rendered
  • Issue was specific to Firefox due to backdrop-filter: blur(4px) rendering bugs

Solution:

  • Added Firefox-specific CSS rule using @-moz-document url-prefix()
  • Disables backdrop-filter only in Firefox while preserving it in other browsers
  • Maintains menu functionality without affecting visual design in Chrome/Safari/Edge

Technical Details:

  • Uses browser-specific CSS targeting to isolate the fix
  • Zero impact on other browsers (they ignore the @-moz-document rule)

Ready?

✅ Yes, this PR is ready for review. The fix has been tested and is production-ready.

Anything Else?

Testing:

  • Verified menu visibility in Firefox
  • Confirmed no visual regression in Chrome/Safari/Edge
  • Tested both settings and chapters menus
  • No JavaScript changes required

Browser Support:

  • Firefox: ✅ Menus now visible
  • Chrome/Safari/Edge: ✅

CSS-only solution:

  • No unit tests required (static CSS rule)
  • No breaking changes
  • Minimal code change with maximum impact

Review Process:

For reviewers, please verify:

  1. Code Review:

    • CSS syntax is correct and follows project conventions
    • @-moz-document url-prefix() targeting is appropriate
  2. Manual Testing (if possible):

    • Open player in Firefox and click settings/chapters buttons
    • Verify menus are visible and functional
  3. Cross-browser Compatibility:

    • Confirm other browsers ignore the Firefox-specific rule
    • Validate no console errors in any browser

Files Changed:

  • packages/vidstack/styles/player/default/menus.css - added Firefox backdrop-filter fix

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant