react-swipeable-views
react-swipeable-views copied to clipboard
During swipes of full window height container, there may be a return to the previous container without animation. ios, safari
During the swipe of full window height container with images, it can arbitrarily return to the previous container, although there should be the next one, or to the next one without smooth animation. The bug occurs on ios safari.
- [x] I have searched the issues of this repository and believe that this is not a duplicate.
Expected Behavior
Swipes between containers should be smooth and without jumping to other containers.
Current Behavior
During swipes, there may be jumps without animation to the previous or next container. Video showing this effect: https://drive.google.com/file/d/18WA4CF3a6UlxfEmmew6w3OBFFup7AGqV/view?usp=sharing
Steps to Reproduce (for bugs)
https://codesandbox.io/s/jovial-hooks-3uxxl?file=/src/App.js
- Swipe containers quickly in about 30 seconds
- Start flipping containers, but at a normal pace
- Expect a bug to appear
Context
In a real application, this effect appears quite often, and it can be difficult to get to the desired container.
Your Environment
| Tech | Version |
|---|---|
| react-swipeable-views | 0.13.9 |
| React | ^16.13.1 or 16.12.0 |
| platform | iOS 13.16 |
| Browser | Safari |
I had a similar issue where a partial swipe (without triggering index change) will return the panel back to its original position without animation.
I added this css and it fixed my issue:
.react-swipeable-view-container > div {
transform: translate3d(0, 0, 0);
}
This stackoverflow answer pointed me to this solution: https://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela
Hope this helps!