oliviertassinari / react-swipeable-views

A React component for swipeable views. :snowflake:
https://react-swipeable-views.com/
MIT License
4.46k stars 480 forks source link

During swipes of full window height container, there may be a return to the previous container without animation. ios, safari #621

Open KopylP opened 4 years ago

KopylP commented 4 years ago

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.

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
jingleleung commented 4 years ago

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!