React-modal animation doesn't work in Safari

Question

I'm implementing modal with react-modal. When displaying the modal, set the transition to 1s and then change the opacity from 0 to 1 with css. With this I want to implement an animation where the modal is displayed slowly.

The problem is that this animation works in chrome, firfox, but not in safari. There are two timings when the animation is activated. The moment you open the modal and the moment you close it. The animation works at the moment of closing in safari, but the animation does not seem to work at the moment of opening.

Is there a solution for this?

The URL below, written by a developer, is pretty much what I'm trying to do. Try opening it in safari.
https://codesandbox.io/s/react-modal-animation-p2qnw?from-embed

ModalWindow.js

import React from "react";
import Modal from "react-modal";
import "../assets/css/modal-style.css";

Modal.setAppElement("#root");

export default function ModalWindow(props) {
  const [modalIsOpen, setIsOpen] = React.useState(false);
  return (
    <div>
      <div onClick={() => setIsOpen(true)}>Click</div>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={() => setIsOpen(false)}
        overlayClassName={{
          base: "overlay-base",
          afterOpen: "overlay-after",
          beforeClose: "overlay-before",
        }}
        className={{
          base: "content-base",
          afterOpen: "content-after",
          beforeClose: "content-before",
        }}
        closeTimeoutMS={1000}
      >
        <div>Message</div>
      </Modal>
    </div>
  );
}

modal-style.css

.overlay-base {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #000000;
  opacity: 0;
  transition: 1s;
}
.overlay-after {
  opacity: 1;
}
.overlay-before {
  opacity: 0;
}
.content-base {
  width: 480px;
  height: 320px;
  background-color: #ffffff;
  opacity: 0;
  transition: 1s;
}
.content-after {
  opacity: 1;
}
.content-before {
  opacity: 0;
}

Answer 1

There is a way so make it works. I was having the same problem in safari but what i did was to set a local state which indicates to me if the modal was open or not, and i set the new state in the afterOpenModal and afterClose and i made it inside a setTimeOut. The setTimeOut force the DOM to be reloaded and recognize the transition in animation.

i work based on your example. Here is the solution

https://codesandbox.io/s/react-modal-animation-forked-20ee3