Three.js: CSS3DObject is not clickable on Firefox

[tranquyetdev]

Description of the problem

Hi team,
I've been experiencing this issue on Firefox latest (haven't tested previous versions). After I set my CSS3DObject a position:
{ "x": 86.72438691726555, "y": 59.24408563389257, "z": -400.84457553626225 }
then I can not click on that object anymore on Firefox (but Chrome works). But when we rotate the camera to other positions then it works.

I've created a fiddle on Codepen to reproduce the issue, Please see in fullscreen mode:

• codepen (latest release branch)

Can someone tell me when a CSS3DObject can be clickable?
Thank you

Three.js version

• [ ] Dev
• [x] r111
• [ ] ...

Browser

• [] All of them
• [ ] Chrome
• [x] Firefox
• [ ] Internet Explorer

OS

• [] All of them
• [x] Windows
• [x] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[Mugen87]

Um, I can reproduce this with the official example:

https://threejs.org/examples/css3d_youtube

It seems Firefox (unlike Chrome and Safari) is not able to detect the mouse hover correctly.

[WestLangley]

Have a look at this SO answer.

I can reproduce this with the official example:

Hmm... That example does not reproduce the issue for me.

[yomotsu]

Here is a simplified pure CSS version, still reproduce in Firefox.
https://codepen.io/yomotsu/pen/vYEKLwj?editors=1000

As Marquizzo mentioned in the SO post, Nested 3D Object with negative-z causes the problem, just like Stacking contexts.
I'm not sure that is the expected behavior or not...

and here is a workaround with pointer-events
https://codepen.io/yomotsu/pen/gObMrLE?editors=1000

Should we add pointer-events: none to scene and camera element, and pointer-events: auto for CSS3DObject elements?

Here is another example for Chrome. Obviously the parent element is covering the child, but still clickable...
https://codepen.io/yomotsu/pen/RwNRaxd?editors=1000

[mrdoob]

Should we add pointer-events: none to scene and camera element

I think that sounds right to me.