Closed tranquyetdev closed 4 years ago
Mugen87
commented
4 years ago 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
commented
4 years ago 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
commented
4 years ago 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
commented
4 years ago Should we add
pointer-events: noneto scene and camera element
I think that sounds right to me.
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:
Can someone tell me when a CSS3DObject can be clickable? Thank you
Three.js version
Browser
OS
Hardware Requirements (graphics card, VR Device, ...)