Блог

Я пытаюсь отладить очевидную проблему с переходами CSS в новом Safari 14.

По какой-то причине переход работает при закрытии модального, но не при открытии модального (у меня такая же проблема и в новом мобильном safari).

В этой демонстрации обратите внимание, как переход работает во всех, кроме последних браузеров Safari (например, отлично работает в Safari 13 или Chrome): https://codesandbox.io/s/safari-14-bug-8c54r

Я пробовал изменять CSS несколькими различными способами, но он всегда продолжает нормально работать в браузерах Chrome и Android, но не в последней версии Safari 14 (в частности, версии 14.0.2 (15610.3.7.1.10, 15610)) или в мобильном Safari.

Есть мысли о том, что изменилось, чтобы сломать это, или как я могу заставить его работать в последних версиях Safari??

Вот соответствующий CSS, используемый для определения перехода:

 .ReactModal__Overlay {
  ...
  opacity: 0;
}

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

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