React Island breaks Trigger/Portal component on iOS

[varna]

Astro Info

Astro                    v5.3.1
Node                     v20.15.1
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

iOS (Safari)

Describe the Bug

1. Make a menubar with trigger and content (portal).
2. Open up dev (npm run dev --host) or prod on iPhone
3. Click the trigger, but nothing happens

I found that this happens only with Astro and iOS (all iPhone browsers use the same engine).

What's the expected result?

I expected some content to show up below the trigger. Like this:
https://stackblitz.com/edit/vitejs-vite-wy7sysgy?file=src%2FApp.tsx

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-aadin6kq?file=src%2Fcomponents%2FMenubar.tsx

Participation

• I am willing to submit a pull request for this issue.

[ematipico]

Can you please fix the first reproduction (the vite one)? It doesn't work

[varna]

Can you please fix the first reproduction (the vite one)? It doesn't work

Done. npm i @radix-ui/react-menubar didn't save, sorry @ematipico

[varna]

My previous guess was that it has something to do with Safari not handling button focus, but I started debugging with Safari devtools. Found out that Dialog portal works while only Menu is broken.

https://stackblitz.com/edit/github-aadin6kq-hw63elgg?file=src%2Fpages%2Findex.astro

Another interesting thing, if you click on Dialog, Menu starts working too. I checked the code difference for these two. Menu was more complex and my current guess is that it's Pointer events.

https://github.com/radix-ui/primitives/blob/main/packages/react/menu/src/menu.tsx

[varna]

Disabling CSS in devtools fixes the issue

[varna]

While broken, tapping Menu button creates mouse events:

recording-broken.json

While fixed (by disabling css, or clicking on dialog first), tapping Menu button creates pointer events:

recording-fixed.json