CSS backface-visibility issue [SOLVED]

I Need Help
1

Having some issues with a flip-card. Works fine in Edge, appears ok in Safari, and broken in Firefox :rofl:

I have tried using all the pre-fixes

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;

The weird bit in Safari, is the button on the back div that flips on hover is only is selectable on one half of the button.

Anyone else encountered this?

I might need to rebuild all this from scratch again :man_shrugging:

The flip is nested inside a card. The card itself isn’t flipping.

2

If you’re having problems, we’re all in trouble. :upside_down_face:

2 Likes
3

So I fixed Firefox. It seems the back div likes to have a background :man_shrugging:

Progress :grimacing:

4

So far, I also tried seeing if it was a z-index issue. But that safari problem still exists with the button.

.flip-card {
  perspective: 1000px;
  transition: transform 600ms ease-in-out;
}

.flip-card:hover {
  transform: translateY(-0.5rem) scale(1.05); 
  transition: transform 600ms ease-in-out;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: all 0.6s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d; 
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; 
  -moz-backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg); 
  z-index: 1; 
}
5

Not sure what is going on, but I do recall experiencing the button issue, and in my case it was the z-index. As for the other issue (FF) I don’t see it. It works in all browsers for me.

.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
perspective: 2000px; /*Remove this if you don’t want the 3D effect */
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
}

.flip-card-back {
transform: rotateY(180deg);
}

1 Like
6

Yeah I resolved the FF issue. It liked to have a background on the back. Which is a non issue with the other browsers.

I have attempted playing with z-index. Applying it to the back and also tried the button itself. No luck.

It’s probably going to be something really simple and obvious :joy:

So in summary the only issue I have now is the button in Safari.

1 Like
7

Thanks @MiguelR, you lead me in the right direction.

z-index was the right line of thinking, but with 3d, its translateZ() :man_facepalming: So I needed to add translateZ(1px); to the back.

I am not sure I needed to bother with the prefix, but I will be absolute here :laughing:

.flip-card-back {
  transform: rotateY(180deg) translateZ(1px);
  -webkit-transform: rotateY(180deg) translateZ(1px);
  -moz-transform: rotateY(180deg) translateZ(1px); 
}

That took way to much of my time :rofl: :rofl:

Handy reference for anybody who is interested…

3 Likes