animation not smooth on safari mobile app

[AdeleRevert]

Hello beautiful humans,

I'm using ReactCSSTransitionGroup on a mobile website. This animation works perfectly fine with every navigators but Safari.

const backgroundTransition = {
  enter: 'animated',
  enterActive: 'fadeIn',
  leave: 'animated',
  leaveActive: 'fadeOut',
};

const Modality = ({children, isDisplayed, onClose}) => (
  <Fragment>
    <ReactCSSTransitionGroup
      transitionName={backgroundTransition}
      transitionEnterTimeout={300}
      transitionLeaveTimeout={300}
    >

I mean it works but it's not smooth at all, it appears in two times. Do you have any idea ?

Thanks :)

[silvenon]

Which CSS property are you animating?

[philipnery]

We probably have the same issue https://github.com/reactjs/react-transition-group/issues/631

[gyk]

SwitchTransition also doesn't work on Safari 15.4.

[silvenon]

@gyk in what way? I tried the demo in Safari 15.5 and it works for me.

[gyk]

@silvenon Sorry, it works now. Last time I tested, the issue of "out-in" mode was:

1. The fly-out part of the animation is good.
2. For the fly-in part, you don't see smooth transition from .fade-enter (translateX(-100%)) to .fade-enter-active (translateX(0%)).

Maybe some transient problem of Safari...