Сафари уже достал постоянно озадачивать, почему в нём тот или иной эффект выглядит как жопа.
Вот такой код у меня есть:
.head__rectangle {
position: absolute;
z-index: 5;
width: 21.5%;
height: 38%;
background: #e53d51;
left: 14.5%;
top: 24vh;
-webkit-transform: perspective(50em) rotateY(7deg);
transform: perspective(50em) rotateY(7deg);
/*
-webkit-perspective-origin: right;
perspective-origin: right;
*/
}
Вот так он выглядит на практике:
Вот так - в поганом Сафари:
Сафари делит этот квадрат на две половины, и левая видна даже над прелоадером, у которого z-index 1000.