react-swipeable-views icon indicating copy to clipboard operation
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

Open KopylP opened this issue 5 years ago • 1 comments

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

  1. Swipe containers quickly in about 30 seconds
  2. Start flipping containers, but at a normal pace
  3. 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

KopylP avatar Aug 15 '20 10:08 KopylP

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!

jingleleung avatar Oct 15 '20 01:10 jingleleung