Modal Animation bug in safari

[Xemylb]

https://media.giphy.com/media/1wq8UXgTzB8D6dL8K7/giphy.gif

[marc-becker]

Having the exact same issue on

macOS 10.13
Safari 11.0

[marc-becker]

So I have found the solution.

I limited the issue to the animation keyframes for the "comingIn" animation. Safari appears to have problems (or at least a weird behaviour) when rendering rotateX.

I then googled and came across this Stack post. So basically the solution is to add

-webkit-transform:translateZ(-1000px);

to .iziModal-overlay.

On (Mac) Safari and Chrome this solution seems to solve the issue (for Safari) and not cause any new ones for Chrome.