CSS Transition Funkiness in Safari 14

Question

I'm trying to debug an apparent problem with CSS transitions in the new Safari 14.

For some reason, the transition works when closing the modal, but not when opening the modal (I'm having the same problem on the new mobile-safari as well).

In this demo, notice how the transition works in anything but the latest Safari browsers (works fine in Safari 13 or Chrome for example): https://codesandbox.io/s/safari-14-bug-8c54r

I've tried modifying the CSS in several different ways, but it continues always to work fine in Chrome and Android browsers, but not on the latest Safari 14 (specifically Version 14.0.2 (15610.3.7.1.10, 15610)) or on mobile Safari.

Any thoughts on what changed to break this, or how I can get it to work in the latest versions of Safari??

Here's the relevant CSS being used to define the transition:

.ReactModal__Overlay {
  ...
  opacity: 0;
}

.ReactModal__Overlay--after-open {
  opacity: 1;
  transition: opacity 500ms linear;
}

.ReactModal__Overlay--before-close {
  opacity: 0;
}