Flip animation in Chrome revealing half of elements from inactive side

Question

I'm using a flip card CSS3 animation to flip one div that contains a card image and icons to the opposite side, which contains another card image and icons.

The problem I've been having is that when the page is viewed in Google Chrome, whenever the back side of the div is shown, the left hand side of the displayed div seems to bleed the elements from the opposite side. As a result, when the icon on the left hand side is clicked, in reality the icon in the same position on the reverse face is what's clicked.

I've constructed a JS Fiddle to illustrate the problem, and also to show that it's just Google Chrome this issue occurs in. After the card has been flipped once, clicking the left icon activated the icon on the other side of the card. The right hand icon is unaffected no matter which way the card is flipped.

Here's the JSFiddle here: https://jsfiddle.net/Gavmastaphlex/a48cxdhm/76/

If anyone can help that would be much appreciated!

HTML

CSS

.flip-card {
    background-color: transparent;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    margin: 0 auto;
}

.flip-card, .flip-card .cardImage {
    width: 300px;
    height: 417px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: visible !important;
    transition: transform 0.8s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    box-shadow: 0px 0px 10px #AAA;
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

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

/* Style the back side */
.flip-card-back {
    color: white;
    transform: rotateY(180deg);
}

.cardIcon {
    display:block;
    position: absolute;
    top: 0;
    width: 50px;
    cursor:pointer;
    cursor:hand;
}

#helpImage {
    left:0;
}

#removeCard {
    right:0;
}

user_1926369 · Answer

Just change this style

.flip-card-back {
  color: white;
  transform: rotateY(180deg) translateZ(1px);   /* added 1px in z */
}

This will make this card side be in front of the other side when turned, and make the items the ones being clicked

var rotate = 0;

$(document).ready(function() {

  $('.draw').on('click', function() {
    updateDeck();
  });

  $('.cardIcon').on('click', function() {
    alert($(this).attr('id') + ' has been clicked!');
  })

})

function updateDeck() {
  rotate += 180;
  $('.flip-card-inner').css('transform', 'rotateY(' + rotate + 'deg)')
}

p {
  font-size: 30px;
  text-align: center;
  text-decoration: underline;
  cursor: hand;
  cursor: pointer;
}


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-card {
  background-color: transparent;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
  margin: 0 auto;
}

.flip-card,
.flip-card .cardImage {
  width: 300px;
  height: 417px;
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: visible !important;
  transition: transform 0.8s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  box-shadow: 0px 0px 10px #AAA;
}


/* Position the front and back side */

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


/* Style the front side (fallback if image is missing) */

.flip-card-front {
  color: black;
}


/* Style the back side */

.flip-card-back {
  color: white;
  transform: rotateY(180deg) translateZ(1px);   /* added 1px in z */
}

.cardIcon {
  display: block;
  position: absolute;
  top: 0;
  width: 50px;
  cursor: pointer;
  cursor: hand;
}

#helpImage {
  left: 0;
}

#removeCard {
  right: 0;
}


Click to flip

Flip animation in Chrome revealing half of elements from inactive side

HTML

CSS

1 Answers