search

framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
22.27k stars 733 forks source link

[BUG] When resizing a canvas with a LayoutCamera, pointer events on meshes are aligned incorrectly. #2621

Open zArubaru opened 1 month ago

zArubaru commented 1 month ago

2. Describe the bug

When resizing the canvas, LayoutCamera displays the scene correctly. But pointer events are treated like the meshes exist within the original area of the canvas.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug This was forked (updated packages to latest) and simplified from the Layout animations example on the framer motion website: https://codesandbox.io/p/sandbox/framer-motion-3d-layoutcamera-forked-5lxprc

4. Steps to reproduce Steps to reproduce the behavior:

  1. Open console (for log).
  2. Hover over black ball (should get "hovering over sphere" in console).
  3. Click within container, will transition canvas to cover the page.
  4. Hover over red highlighted area (should get "hovering over sphere" in console).
  5. You may test this again, but first remove the <Camera />, and see that then meshes get pointer events correctly.

5. Expected behavior We should get "hovering over sphere" in console, when hovering over black ball, in both states.

7. Environment details MacOS / Arc (Chromium Webkit)