search

motiondivision / motion

A modern animation library for React and JavaScript
https://motion.dev
MIT License
25.67k stars 843 forks source link

[BUG] Draggable area incorrectly reduced after page scroll and refresh #2829

Open SaeWooKKang opened 1 month ago

SaeWooKKang commented 1 month ago

1. Read the FAQs 👇 ✅ 2. Describe the bug

When applying dragConstraints with a ref (position: absolute, top, left, bottom, right: 0), the behavior is as follows:

Without scrolling, the draggable element can move freely within the entire viewport area. However, after scrolling, the draggable element is constrained to move only within the viewport area minus the scrolled height.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://stackblitz.com/edit/vitejs-vite-gdmqjk?file=src%2FApp.tsx

4. Steps to reproduce

  1. Navigate to the provided link.
  2. Without scrolling, verify that you can drag the element to all corners (left, right, top, and bottom) of the viewport.
  3. Scroll the page.
  4. Refresh the page.
  5. Attempt to drag the element and verify that you cannot move it to the bottom of the viewport anymore.

5. Expected behavior

Even when the page is scrolled, the element should be draggable to the bottom of the viewport.

6. Video or screenshots

https://github.com/user-attachments/assets/3ed7eeca-1e1b-4cde-99e5-9b3ee90f32f1

7. Environment details

mac 15, chrome