MenuBar dropdown menus not working in fullscreen mode

[shamanicvocalarts]

Describe the bug

Title: MenuBar dropdown menus not working in fullscreen mode

Description:
When using the MenuBar component, dropdown menus stop working when the application is in fullscreen mode. The menus work correctly in windowed mode.

Steps to Reproduce:

1. Create a basic application with a MenuBar component
2. Add some dropdown menus (File, Edit, View etc.)
3. Enter fullscreen mode ( via js, not tested via browser )
4. Try to click on any menu item

Expected Behavior:

• Dropdown menus should open and be interactive in both windowed and fullscreen modes

Actual Behavior:

• Dropdown menus work correctly in windowed mode
• In fullscreen mode, clicking menu items does not open their dropdown menus

Technical Details:

• Using bits-ui MenuBar component
• Portal content appears to not be properly positioned/rendered in fullscreen context
• Tried various strategy and positioning options without success:
  • strategy="fixed"
  • updatePositionStrategy="always"
  • Various z-index arrangements

Environment:

• bits-ui (latest version)
• Svelte 4.x
• Browser: [Opera(chrome), Edge]

Notes:
This appears to be related to how the MenuBar's portal content handles fullscreen contexts. The menu triggers remain visible and clickable, but the portaled content either isn't rendering or isn't properly positioned in the fullscreen stacking context.

Possible areas to investigate:

1. Portal positioning strategy in fullscreen context
2. Fullscreen stacking context handling
3. Menu content positioning relative to fullscreen root

• will provide repro 24hr from post

Reproduction

https://stackblitz.com/github/huntabyte/bits-ui-reproduction?file=src%2Froutes%2F%2Bpage.svelte

Logs

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 32.64 GB / 63.92 GB
  Binaries:
    Node: 22.6.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (10.0.26100.2894), Chromium (10.0.26100.2894), ChromiumDev (10.0.26100.2894)
    Internet Explorer: 11.0.26100.1882

Severity

annoyance

[huntabyte]

Please upgrade to Svelte 5 and Bits UI 1.0 and if you can still reproduce we will investigate further. We are only supporting stable versions of Bits UI (1.0+)

[shamanicvocalarts]

Please upgrade to Svelte 5 and Bits UI 1.0 and if you can still reproduce we will investigate further. We are only supporting stable versions of Bits UI (1.0+)

Hi Hunter, thanks for speedy response. so I am using latest bits UI & svelte 5, I used an LLM to help me generate initial bug report & as its a mixed project it got confused, I failed to catch the discrepancy in my review, my bad.

Will dedicate some time to recreate/investigate the issue in the stackblitz later today & will let you know if can recreate in an isolated environment.

some more information regarding this bug, as it does seem to be an edge case: it only seems to be present with https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen , the built in browser f11 fullscreen does not cause the issue. to clarify, triggering fullscreen via requestFullscreen makes the menubars menu items inaccessible on desktop & mobile, though these elements work fine via f11 browser fullscreen ( which is not available on mobile )

[shamanicvocalarts]

Ok. so I did some more sleuthing on my end, I think the issue is related to portals & them not working correctly with requestFullscreen. so this is likely not a bits UI issue & more just a browser quirk, If I understand the docs correctly it should be possible to make the menu items render without using portals & thus avoid this issue . will confirm I have everything working later but its likely this issue can be closed .

EDIT
can confirm, removing portals from my implementation fixed the issue.

[huntabyte]

If you're going fullscreen like that, it's unlikely you need portals anyways! Will close this issue for now.