Bug: onPointerDown not called when rendered in 'display: contents' root

[V3RON]

onPointerDown listeners are not called in iOS Safari when a React application is rendered within an element that has the display: contents CSS rule. This issue seems to be specific to iOS, as it works fine on macOS and Windows.

This bug was discovered through a report in the Astro framework. A user noted that a React component became unclickable after a View Transition, which Astro emulates using JavaScript. Upon investigation, I traced the issue to elements with the display: contents rule.

The issue may be related to the trapClickOnNonInteractiveElement hack. When a fake pointerdown listener is added, the bug disappears and everything works correctly. However, I haven't found any documentation on this behavior, so this is just a hypothesis.

React version: 18.3.1

Steps To Reproduce

Render React component with <button onPointerDown={() => console.log('called')}>Click me in an element with display: contents applied. Try clicking the button in iOS Safari.

See this page for reproduction.
See this repository for source code.

The current behavior

onPointerDown listener is not called

The expected behavior

onPointerDown listener should be called

[eps1lon]

Can you check if it's just bubbling of pointer events in general i.e. does <div style="display:contents;" onpointerdown="alert(1);"><button>click</button></div> also not work?

Is it only display: contents on the container that is problematic or would it also not work if any intermediate elements have display: contents?

[V3RON]

@eps1lon

Can you check if it's just bubbling of pointer events in general i.e. does

click

also not work?

You are right - it doesn't work unless the has a pointer event listener.

Is it only display: contents on the container that is problematic or would it also not work if any intermediate elements have display: contents?

Only the container. It works just fine for intermediate elements.

[eps1lon]

Only the container. It works just fine for intermediate elements.

Does this means there's technically a workaround by using a basic div as the container and then rendering root.render(<div style={{ display: "contents" }}><App /></div>) instead?