framer / motion

Open source, production-ready animation and gesture library for React

Home Page:https://framer.com/motion

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

zArubaru opened this issue · comments

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)