Modal is not animate in the first render on chrome browser from iphone (React, IOS, SCSS, Chrome)

I create a simple modal in react. I also create a scss file for the modal and tried to animate the enter & exit of the modal. When I first open the modal - the animation is not working when enter from chrome on iphone (works perfectly on both iphone and desktop safari, and desktop chrome)

@keyframes pop {
  0% {
    -webkit-transform: scale(0,0) translate(0,0);
    transform: scale(0,0) translate(0,0);
  }
  70% {
    -webkit-transform: scale(1.05,1.05) ;
    transform: scale(1.05,1.05);
  }
  100% {
    -webkit-transform: scale(1,1) ;
    transform: scale(1,1);
  }
}

  &.showing {
    .modal {
      animation: pop 0.3s ease-in-out;
      animation-fill-mode: forwards;
      animation-direction: normal;
    }
  }
  &.shown {
    .modal {
      transform: scale(1,1);
    }
  }
  &.hidden {
    .modal {
      transform: scale(0,0);
    }
  }
  &.hiding {
    .modal {
      animation: pop 0.3s ease-in-out;
      animation-fill-mode: forwards;
      animation-direction: reverse;
    }
  }

import React, { ReactNode, useEffect, useState } from 'react'
import classes from './popupModal.module.scss'

const PopupModal = ({onClose}: IProps) => {
  const [currentState, setCurrentState] = useState(’showing')
  useEffect(() => {
    setTimeout(() => {
      setCurrentState(’shown')
    }, 300)
  }, [ ])

  const handleClose = () => {
    setCurrentState(‘hiding')
    setTimeout(() => {
      if (onClose) {
        onClose()
      }
    }, 300)
  }
  const closeBtnSize = smallCloseButton ? 's' : 'm'
  return (
    <div className={ classNames(classes.modalWrapper, classes[currentState])} >
            <button
              onClick={ handleClose }
            />
    </div>
  )

}

any ideas ?

I tried to change the scale to rotate to see if there is a problem with the tranform: scale on chrome.