How to solve the problem with layout for safari?

Question

css

The transform: rotate property works in a very strange way, with various artifacts. I think the problem is with the transform property, but I'm not sure. I'm doing a card flip effect ( https://webinar.ablethink.ru) in chrome and other browsers, except for safari, everything is fine. How to fix it? There is also an option to set other properties only for Safari, but how to do this so that chrome does not react to them? I tried to write like this:

@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome,.flipcard.h:hover .front, .flipcard.h.flip .front{
  transform: rotateY(0deg);}
}

but it didn't help, styles are not applied.

Answer 1

Modernizr