Card Flip Not Working in Safari

[mrwizzer]

Hi Desandro,

I love your Card Flip tutorial, and it works great in Chrome and Firefox, but apparently not in Safari. (I'm running Safari 13.1.3).

In Safari, the backside text always displays in reverse, and when the transition from front to back is complete, the front suddenly becomes visible again (reversed). We can never see the backside unless it's transitioning, and the front is displayed backward when we should be seeing the backside.

Is there a fix you can suggest?

Thanks!

-Mike

[Andrey11]

I really enjoyed the Cube perspective demo, thank you for that! I noticed that on iOS the Cube renders with 4 sides missing, and when rotated to any side other than front or back, the Cube disappears completely. However during the translate phase (in motion) the Cube renders correctly.

I added `0.01 deg to each rotateX and rotateY styles and that fixed the issue on iOS.

.cube__face--front  { transform: rotateY(  0deg) translateZ(100px); }
.cube__face--right  { transform: rotateY( 90.01deg) translateZ(100px); }
.cube__face--back   { transform: rotateY(180.01deg) translateZ(100px); }
.cube__face--left   { transform: rotateY(-90.01deg) translateZ(100px); }
.cube__face--top    { transform: rotateX( 90.01deg) translateZ(100px); }
.cube__face--bottom { transform: rotateX(-90.01deg) translateZ(100px); }

.cube.show-front  { transform: translateZ(-100px) rotateY(   0deg); }
.cube.show-right  { transform: translateZ(-100px) rotateY( -90.01deg); }
.cube.show-back   { transform: translateZ(-100px) rotateY(-180.01deg); }
.cube.show-left   { transform: translateZ(-100px) rotateY(  90.01deg); }
.cube.show-top    { transform: translateZ(-100px) rotateX( -90.01deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX(  90.01deg); }

I am sure there are better solutions out there, but this one does not require a major overhaul and does not feel too "hacky" to me :)

Anyways, thanks for making this, awesome job!

Cheers, Andrey

[Andrey11]

Hi Desandro,

I love your Card Flip tutorial, and it works great in Chrome and Firefox, but apparently not in Safari. (I'm running Safari 13.1.3).

In Safari, the backside text always displays in reverse, and when the transition from front to back is complete, the front suddenly becomes visible again (reversed). We can never see the backside unless it's transitioning, and the front is displayed backward when we should be seeing the backside.

Is there a fix you can suggest?

Thanks!

-Mike

Hi @mrwizzer, adding the following props fixed the issue

&Face {
      position: absolute;
      display: flex;
      flex-direction: column;
      width: 100%;
      width: -webkit-fill-available;
      transform-style: preserve-3d;
      height: 100%;
      backface-visibility: hidden;
      box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.35);
      border-radius: 0.3125em;

      &Front {
        background-color: transparent;
        backface-visibility: hidden;
      }

      &Back {
        background-color: transparent;
        backface-visibility: hidden;
        transform: rotateX(180deg);
      }
}

Cheers, Andrey