Card back hidden on first transition in chrome

问题

I'm developing a generic card that displays various content on the front and back. The card flips 180 degrees on a click.

In Chrome, when I have content on the back that contains absolute or relative positioning, the back of the card only becomes visible at (or near) the end of the transition.

In Safari and Firefox I don't see the same issue.

The issue can be seen in this pen https://codepen.io/rumbletumble/pen/GRgNeLg

I've tried

• Using animation rather than transition, but the same issue exists
• Adding backface-visibility: visible to the card back, but this causes flickering on the card

Could this simply be a bug in Chrome?

回答1:

I have change the below class and it now seems to be working fine across all browsers. (wan't able to test IE)

/* hide back of pane during swap */
.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

  transform: rotateX(0deg);
  transform-style: preserve-3d;

  position: absolute;
  top: 0;
  left: 0;
  color: cornSilk;
  text-align: center;
  font: 3em/240px 'Helvetica Neue', Helvetica, sans-serif;
  box-shadow: -5px 5px 5px #aaa;
}

来源：https://stackoverflow.com/questions/59379794/card-back-hidden-on-first-transition-in-chrome