Weird pointer behaviors when using state.events.connect

[miguderp]

Hey 👋🏻

I'm encountering an issue which I do not believe is entirely related to R3F but is about pointer events and/or event bubbling (hence why I'm creating a discussion, but feel free to swap to an issue if you see fit).

My scenario is a basic Next.js web app containing a multitude of routes/components and on top of it I lay a <Canvas /> with a fixed positioning and pointer-events disabled then both of them are wrapped by a container, just like @drcmda recently shared on Twitter.

I've created a quick fork to reproduce it the best I could in a simple manner: https://codesandbox.io/s/canvas-text-forked-8n0pvr?file=/src/App.js

What I notice is that:

1. As soon as I scroll, the pointer events are off vertically.
2. If I had some margin (weirdly enough padding is okay) to my paragraph then again the pointer events are off. This happens both horizontally and vertically depending on which margin I add.
3. I could not reproduce it with the codesandbox but I feel that sometimes I may be victim of event bubling in my app, resulting in a children receiving the focus and not the container that was used within state.events.connect – Could that be a thing?

Am I missing something? Thanks!

[mwmwmw]

If you remove static from the canvas, you can see the pointer-events work normally.

This sounds a lot like this issue. https://spectrum.chat/react-three-fiber/general/raycasting-with-stage-position-fixed~ff3fe55d-2c40-4a30-934c-65929242d8ff

I believe the solution is to use react-use-measure to calculate the offset for the ray.

Here is the Three solution linked in the original issue. https://stackoverflow.com/questions/13542175/three-js-ray-intersect-fails-by-adding-div/13544277

[CodyJasonBennett]

As soon as I scroll, the pointer-events are off vertically.

What does this look like? I'm imagining that you can hover over an element, scroll w/o mousemove, and the element would remain in focus.