I'm facing an issue with Safari (both desktop and iOS) related to a simple CSS flip animation. Despite searching through similar posts and answers, I haven't found a solution yet and am in need of a fresh perspective.
Essentially, I am creating a vertical blind overlay flip effect to showcase car window tints. Here is a simplified version:
<div class="blind"></div>
<div class="blind"></div>
<div class="blind"></div>
<div class="blind"></div>
<div class="blind"></div>
This is how the CSS is structured
.blind {
position:relative;
width:calc(100% / 5);
height:500px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.blind.flip-animation {
animation:flip 1s ease;
}
.blind:nth-child(2) { animation-delay:50ms; }
.blind:nth-child(3) { animation-delay:100ms; }
.blind:nth-child(4) { animation-delay:150ms; }
.blind:nth-child(5) { animation-delay:200ms; }
@keyframes flip {
0% {
-webkit-transform:perspective(800px) rotateY(0);
transform:perspective(800px) rotateY(0);
}
100% {
-webkit-transform:perspective(800px) rotateY(360deg);
transform:perspective(800px) rotateY(360deg);
}
}
The .flip-animation class is activated by an IntersectionObserver when the container comes into view, but this is not the main issue at hand.
I have tried different approaches such as keyframes with only
to:transform:perspective(800px) rotate(1turn);perspective:800px, using or removing the -webkit- prefix, including backface-visibility:hidden; and transform-style:preserve-3d; within the animation itself (with the -webkit- prefix as well). However, none of these attempts seem to affect Chrome (it displays correctly regardless), while in Safari, there are flickering issues and incorrect behavior. It seems like the blinds are flipping behind the opaque background (container) when they appear below the surface. Are there alternative methods that I might be overlooking?
Here are images for comparison between Chrome and Safari: