Search code examples
jqueryhtmlcssgoogle-chromeflip

CSS Flip Card - Bug in Chrome

I have a CSS Flip Card, which has been set up as a jsFiddle here:

https://jsfiddle.net/kwudsgfw/

This is working as intended in FireFox, MS Edge, and even IE, however has issues in Chrome (and chrome based browsers such as Opera).

In Chrome there seems to be an issue with the display of the Front side of the flip card remaining displayed until the user moves the mouse out of the card, and occasionally after flipping the card back over the front face isn't displayed.

I should mention that the opacity change was on flip was added as a solution to a previous issue with Chrome where a Canvas element within the front of the flip card wasn't obeying the "backface-visibility: hidden" setting.

What am I doing wrong here, or if nothing, does anyone know a work around?

For the sake of completeness the code in the Fiddle is below:

HTML

<div class="widget " style="height: 300px;">
  <div class="flipper">
    <div class="front anim">
      <div style="width: 90%; margin: auto; position:relative;">
        <div style="text-align: center; width: 100%;">
          <h1>Front</h1>
          <p>
            Lorem Ipsum and all that jaz
          </p>
        </div>
      </div>
    </div>
    <div class="back anim">
      <div style="height: 299px; width: 100%; margin: auto;">
        <div style="text-align: center; width: 100%;">
          <h1>Back</h1>
        </div>
        <table>
          <tbody>
            <tr>
              <th>Value 1</th>
              <td>798</td>
            </tr>
            <tr>
              <th>Value 2</th>
              <td>663</td>
            </tr>
            <tr>
              <th>Value 3</th>
              <td>493</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

CSS

.flipper {
  position: relative;
}

.anim {
  width: 100%;
  height: 100%;
  transition: all .5s;
  backface-visibility: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
}

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

.flipper-click .front {
  opacity: 0;
  transform: rotateY(-180deg);
}

.flipper-click .back {
  z-index: 2;
  transform: rotateY(0deg);
}

.widget {
  width: 300px;
  height: 0px;
  overflow: hidden;
  border: 1px solid white;
  border-radius: 5px;
  padding: 3px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2px;
  float: none;
  color: #000;
  background-color: #aaa;
}

.widget:hover {
  background-color: #999;
}

JavaScript

$(".widget").click(function () {
  var $flipper = $(this).find(".flipper");
  $flipper.toggleClass("flipper-click");
});
Solution

  • apply backface-visibility:hidden on parent as well:

    https://jsfiddle.net/kwudsgfw/3/