Autoscroll not working in a Popover in Safari
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
Reordering items withing a GridList in Popover in Safari is unusable
https://github.com/user-attachments/assets/095442be-59c5-4b69-bfed-847288593f61
### 🤔 Expected Behavior?
It should scroll up when close to the top edge and bottom when close to the bottom edge
### 😯 Current Behavior
When trying to drag and drop an item within a GridList in Safari it automatically scrolls to the bottom if grabbing an element from the middle of the list and it's impossible to move the list back up
### 💁 Possible Solution
I have a fix locally that fixes that
- use absolute units instead of relative ones (`getBoundingClientRect().bottom - AUTOSCROLL_AREA_SIZE` instead of `getBoundingClientRect().height - AUTOSCROLL_AREA_SIZE`)
- I'm not sure how that affects other cases, but I'm willing to investigate and open a PR
- stop autoscroll in one axis if the item no longer needs it but still is close to the edge on the other axis
- added speed slope to the autoscroll to make it start slower
### 🔦 Context
It breaks autoscrolling in Safari
### 🖥️ Steps to Reproduce
Code for the above https://stackblitz.com/edit/sb1-efxdtmhi?file=src%2FApp.tsx
### Version
1.14.0
### What browsers are you seeing the problem on?
Safari
### What operating system are you using?
MacOS
### 🧢 Your Company/Team
Motion
Contributor guide
Assessment
This issue has not been assessed yet.