First index change is broken

[nikandlv]

The first time you change the index it won't animate. Here's a demo https://material-ui.com/components/tabs/#full-width

[eprice122]

Bug present in Chrome but not FireFox

[peitalin]

The bug is present on: Chrome v83 Firefox v77 Safari v12

Any idea where in the codebase to start looking at fixing this? I would like to take a look. @oliviertassinari

[peitalin]

Did some digging,

When the component first mounts, displaySameSlide is initially true, causing transition = “all 0s ease 0s” when then component first mounts. So the 1st index change does not animate.

Then after the 1st transition, the computed displaySameSlide then becomes false (calculated in componentsWillReceiveProps), after which the calculated transition = “transform 0.35s cubic-bezier(0.15, 0.3, 0.25, 1) 0s”, which enables the transition animation thereafter.

[lord0gnome]

Hi! Is there any word on this? It's quite annoying! Thanks for the library either way, it's great!

[I3rendan]

This is not a perfect solution, but if you take advantage of the containerStyle property you can get the initial slide to transition correctly...

<SwipeableViews
    containerStyle={{
        transition: 'transform 0.35s cubic-bezier(0.15, 0.3, 0.25, 1) 0s'
    }}
    ...

[lord0gnome]

Ah, Thank you very much!!! Works like a charm, true that it is imperfect but so is my application so I can't judge it. XD Also worth noting for some reason I don't have this issue when I use my webapp in a ios safari browser(I read above it's mostly a chrome bug, could be why)

[nikandlv]

@I3rendan its a good workaround until the pull request is merged

[sdutwsl]

the bug is still existing on Chrome 85.0

[kahirokunn]

the bug is still existing on Chrome 86

[Meet008]

issue still not resolved with chrome. please fix it.

[oliviertassinari]

I did some digging in https://github.com/mui-org/material-ui/issues/22351#issuecomment-778660214, this seems to fix the issue:

diff --git a/packages/react-swipeable-views/src/SwipeableViews.js b/packages/react-swipeable-views/src/SwipeableViews.js
index b25b743..4e8ea1e 100644
--- a/packages/react-swipeable-views/src/SwipeableViews.js
+++ b/packages/react-swipeable-views/src/SwipeableViews.js
@@ -763,6 +763,11 @@ So animateHeight is most likely having no effect at all.`,
       }
     }

+    // Workaround bug https://github.com/oliviertassinari/react-swipeable-views/issues/599.
+    if (this.containerNode) {
+      this.containerNode.style.WebkitTransition = WebkitTransition;
+      this.containerNode.style.transition = transition;
+    }
+
     const containerStyle = {
       height: null,
       WebkitFlexDirection: axisProperties.flexDirection[axis],

[yanickrochon]

I have the exact problem as well. The initial element has this style applied to it :

element.style {
    flex-direction: row;
    transition: all 0s ease 0s;
    direction: ltr;
    display: flex;
    will-change: transform;
    transform: translate(-100%, 0px);
}

After the first transition, the transition is set correctly

element.style {
    flex-direction: row;
    transition: transform 0.35s cubic-bezier(0.15, 0.3, 0.25, 1) 0s;
    direction: ltr;
    display: flex;
    will-change: transform;
    transform: translate(0%, 0px);
}

[leontastic]

@oliviertassinari Do you think there's any issue with setting displaySameSlide: false as the default? When I change it this issue goes away altogether.

Diff:

diff --git a/packages/react-swipeable-views/src/SwipeableViews.js b/packages/react-swipeable-views/src/SwipeableViews.js
index 0647853..9ff5193 100644
--- a/packages/react-swipeable-views/src/SwipeableViews.js
+++ b/packages/react-swipeable-views/src/SwipeableViews.js
@@ -246,7 +246,7 @@ class SwipeableViews extends React.Component {
       renderOnlyActive: !props.disableLazyLoading,
       heightLatest: 0,
       // Let the render method that we are going to display the same slide than previously.
-      displaySameSlide: true,
+      displaySameSlide: false,
     };
     this.setIndexCurrent(props.index);
   }

PR: #639

[gaojude]

Bug is still here..

[mrgazanfarli]

Still actual

[kubagp1]

AFAIK the latest version of react-swipeable-views that doesn't have problems with animation on first transition and can start with index != 0 is 0.12.10. In order to install it with new React version you have to use --force flag. You'll also get warnings in the console when using it. Since it's four years old you will get 5 vulnerabilities (4 low, 1 high) in your code.

[roninMo]

I'm still running into this error, and by default this shouldn't be happening, so the bug still needs to be fixed...

[davloperez]

The same here. Is anybody taking a look at this bug?

The workaround provided by @I3rendan is good for the most of cases, however there is a scenario where this causes strange behavior: If you want to initially start showing the second view (or any view except the first one), you will see an undesired initial animation after the component is rendered for the first time.

[shawngustaw]

This is kind of a hack but you can use something like this:

function useDelayedIsMounted(timeout = 0) {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setIsMounted(true);
    }, timeout);
  }, []);

  return isMounted;
}

...

const isMounted = useDelayedIsMounted(10);

...

containerStyle={
  isMounted
    ? {
      transition: 'transform 0.35s cubic-bezier(0.15, 0.3, 0.25, 1) 0s',
    } : {}
 }

tldr: wait a couple ms after mounting to apply the CSS that fixes this bug.