Card Back Hidden on First Transition in Chrome

Card back hidden on first transition in chrome

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;
}

Can't select inputs after TransformY on chrome for a card flipping effect

It seems, that .card overlaps the back after rotation.

Maybe you could rotate not .card but .card__face--front and .card__face--back. I made some modifications in snippet.

function flipCard() {  var element = document.getElementById("flipper-container");  element.classList.toggle("flipper--flipped");}
.flipper {  perspective: 1000px;  width: 200px;  height: 200px;  flex: 0 1 auto;}
.card {  height: 200px;  width: 200px;  transition: transform 1s;  transform-style: preserve-3d;  padding: 0px;  backface-visibility: hidden;}
.card__face {  box-sizing: border-box;  border-radius: 12px;  position: absolute;  height: 100%;  width: 100%;  top: 0;  left: 0;  padding: 20px;  backface-visibility: hidden;}
.card__face--back {  background-color: #9e0495;  position: absolute;  height: 100%;  color: white;  transform: rotateY(180deg);  transition: transform 0.5s;}
.card__face--front {  background: gray;  transition: transform 0.5s;}
.flipper.flipper--flipped .card__face--front {  transform: rotateY(-180deg);  transition: transform 0.5s;}
.flipper.flipper--flipped .card__face--back {  transform: rotateY(0deg);  transition: transform 0.5s;}
<div id="flipper-container" class="flipper">  <div class="card">    <div class="card__face card__face--back">      <p>I am the back</p>      <input type="text" placeholder="Back input">      <p>The back one doeesn't work in chrome :(</p>    </div>
    <div class="card__face card__face--front">      <p>I am the front</p>      <input type="text" placeholder="Front input">      <p>The front input works.</p>    </div>  </div></div>
<button id="toggle-flip" onclick="flipCard()">Click me</button>

Why can't I click the left side of the link on this CSS flip card in Chrome?

I don't know the reason but this is most likely a bug because it works on Firefox as intended. Adding pointer-events: none; to .card-inner and pointer-events: auto to .card-face works, only god knows why.

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */
.card {  -webkit-perspective: 1000px;  perspective: 1000px;  display: inline-block;}
.card .card-inner {  position: relative;  -webkit-transition: -webkit-transform 0.6s;  transition: -webkit-transform 0.6s;  -o-transition: transform 0.6s;  transition: transform 0.6s;  transition: transform 0.6s, -webkit-transform 0.6s;  -webkit-transform-style: preserve-3d;  transform-style: preserve-3d;  will-change: transform;  pointer-events: none;}
.card .card-inner .card-face {  position: absolute;  top: 0;  left: 0;  height: 100%;  width: 100%;  -webkit-backface-visibility: hidden;  backface-visibility: hidden;  pointer-events: auto;}
.card .card-inner .card-face.card-back {  -webkit-transform: rotateY( 180deg);  transform: rotateY( 180deg);}
.card .card-inner .card-face .card-face-inner .card-face-content {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  -webkit-backface-visibility: hidden;  backface-visibility: hidden;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center;  font-family: Arial, sans-serif;  font-size: 22px;}
.card:hover .card-inner {  -webkit-transform: rotateY( 180deg);  transform: rotateY( 180deg);}
.card .card-back {  background: steelblue;}
<div class="card">  <div class="card-inner">    <img src="https://via.placeholder.com/400x500?text=%20" alt="Sample Image" />
    <div class="card-face card-front">      <div class="card-face-inner">        <div class="card-face-content">          Front        </div>      </div>    </div>
    <div class="card-face card-back">      <div class="card-face-inner">        <div class="card-face-content">          <a href="#foo">Back</a>        </div>      </div>    </div>  </div></div>

CSS Flip Card - Bug in Chrome

apply backface-visibility:hidden on parent as well:

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

CSS transform transition backface-visibility not working

Here's the updated code.

Chrome has a weird bug when rotating elements, so backface-visibility was needed after all, just not on the .card itself.

$(document).ready(function(){   $(".card").click(function(){     $(this).toggleClass("turned");     $(this).toggleClass("unturned");   });});
body{  background-color:#5AEDBC;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;  overflow:hidden;}
.card:after{  box-sizing:border-box;  backface-visibility:hidden;  display:block;  content:'';  width:200px;  height:400px;  left:380px;  position:absolute;  background: cadetblue;  transform:rotateZ(-40deg);  backface-visibility:hidden;}
.card{  padding:20px 50px;  overflow:hidden;  position:absolute;  width:350px;  height:120px;  display: flex;  justify-content: center;  align-items:center;  flex-direction: row;  background-color:white;  font-family:'Raleway', sans-serif;  border:5px solid rgba(0,100,100, 0.75);  color:#008A45;  margin-top:100px;  transition:all 1s ease;  transform-origin:0 100%;  transform-style: preserve-3d;}
.cardBack {  width:100%;  height:100%;  position:absolute;  top: 0;  left: 0;  background-color:white;  z-index:101;}
.card.unturned .cardBack{  opacity: 0;  transition: opacity 0.25s ease 0.25s;}.card.turned .cardBack{  opacity: 1;  transition: opacity 0s ease 0.15s;}/* this is needed for chrome */.card > * {  backface-visibility: hidden;}/* */.card.turned{  transition:all 1s cubic-bezier(.17,.67,.59,1.35);  transform:rotateX(-180deg);}
.info{  display: flex;  justify-content: center;  flex-direction: column;  text-align:right;  backface-visibility:hidden;}
.title{  font-size:26px;  font-weight:bold italic;  color:black;  padding:5px 0;  display:block;}
.desc{  font-size:18px;  color:#ccc;  padding:5px 0;  display:block;}
.img{  border-radius: 50%;  width: 90px;  height: 90px;  margin-left:20px;  backface-visibility:hidden;  z-index:100;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/><div class="card unturned">  <div class="cardBack"></div>  <div class="info"><span class="title">Interesting person 1</span><span class="desc">Description of the interesting person 1</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/></div><div class="card unturned">  <div class="cardBack"></div>  <div class="info"><span class="title">Interesting person 2</span><span class="desc">Description of the interesting person 2</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/></div><div class="card unturned">  <div class="cardBack"></div>  <div class="info"><span class="title">Interesting person 3</span><span class="desc">Description of the interesting person 3</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/></div>

Flip animation in Chrome revealing half of elements from inactive side

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;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p class="draw">Click to flip</p>
<div class="flip-card flip-back">  <div class="flip-card-inner">    <div class="flip-card-front">      <img id="helpImage" class="cardIcon" src="https://gavmcgz.github.io/img/question.png" />
      <img id="removeCard" class="cardIcon" src="https://gavmcgz.github.io/img/minus.png" alt="Sample Image" />
      <img class="cardImage" src="https://gavmcgz.github.io/games/orleans/img/cards/1-1.jpg" alt="Sample Image">    </div>    <div class="flip-card-back">      <img id="helpImage" class="cardIcon" src="https://gavmcgz.github.io/img/question.png" />
      <img id="removeCard" class="cardIcon" src="https://gavmcgz.github.io/img/minus.png" alt="Sample Image" />      <img class="cardImage" src="https://gavmcgz.github.io/games/orleans/img/cards/1-2.jpg" alt="Sample Image">    </div>  </div></div>

Backface visibility broken in Chrome (certain platforms/versions)

Alright, I made some research and apparently it depends on the machine and on the chrome version used.

As chromium follows chrome development, we can see this problem appears sometimes http://code.google.com/p/chromium/issues/detail?id=39044

I found 2 solutions I can't try since this CSS works on my computer.

  • Trying to start chrome with this option : --enable-accelerated-compositing
  • Trying https://stackoverflow.com/a/9276526/460368
  • Waiting for a new version of chrome ;)

You can get inspire by that from cssplay

CSS :

#container {position: relative; height:362px; width: 282px; margin: 0 auto;
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
#container div {position:absolute; left:0; top:0; width:242px; height: 322px; padding:20px; background:#463;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
#container div.lower {font-family: verdana, arial, sans-serif; background:#642;
background: -moz-linear-gradient(-45deg, #642, #864 50%, #642 100%);  
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#642), color-stop(50%, #a86), color-stop(100%, #642));
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
#container div.lower h1 {font-size:20px; padding:0; margin:0; color:#fff; line-height:40px;}
#container div.lower p {font-size:11px; padding:0; margin:0; color:#eee; line-height:20px;}
#container div.lower a {color:#ff0;}

#container div.upper {
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
background: -moz-linear-gradient(-45deg, #463, #8a7 50%, #463 100%);  
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#463), color-stop(50%, #8a7), color-stop(100%, #463)); 
}
#container div.upper img {border:1px solid #fff;}

#container:hover div.lower {
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
}
#container:hover div.upper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}

HTML : 

<div id="container">
    <div class="lower">

        <h1>The Barn Owl</h1>
        <p>(Tyto alba) is the most widely distributed species of owl, and one of the most widespread of all birds. It is also referred to as Common Barn Owl, to distinguish it from other species in the barn-owl family Tytonidae. These form one of two main lineages of living owls, the other being the typical owls (Strigidae). T. alba is found almost anywhere in the world except polar and desert regions, Asia north of the Alpide belt, most of Indonesia, and the Pacific islands.</p>
        <p>Source <a href="http://en.wikipedia.org/wiki/Barn_Owl">Wikipedia</a>
    </div>
    <div class="upper">
        <img src="cssplay7/owl.jpg" alt="Barn owl" />
    </div>

</div>

Backface visibility broken in Chrome (certain platforms/versions)

Alright, I made some research and apparently it depends on the machine and on the chrome version used.

As chromium follows chrome development, we can see this problem appears sometimes http://code.google.com/p/chromium/issues/detail?id=39044

I found 2 solutions I can't try since this CSS works on my computer.

  • Trying to start chrome with this option : --enable-accelerated-compositing
  • Trying https://stackoverflow.com/a/9276526/460368
  • Waiting for a new version of chrome ;)

You can get inspire by that from cssplay

CSS :

#container {position: relative; height:362px; width: 282px; margin: 0 auto;
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
#container div {position:absolute; left:0; top:0; width:242px; height: 322px; padding:20px; background:#463;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
#container div.lower {font-family: verdana, arial, sans-serif; background:#642;
background: -moz-linear-gradient(-45deg, #642, #864 50%, #642 100%);  
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#642), color-stop(50%, #a86), color-stop(100%, #642));
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
#container div.lower h1 {font-size:20px; padding:0; margin:0; color:#fff; line-height:40px;}
#container div.lower p {font-size:11px; padding:0; margin:0; color:#eee; line-height:20px;}
#container div.lower a {color:#ff0;}

#container div.upper {
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
background: -moz-linear-gradient(-45deg, #463, #8a7 50%, #463 100%);  
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#463), color-stop(50%, #8a7), color-stop(100%, #463)); 
}
#container div.upper img {border:1px solid #fff;}

#container:hover div.lower {
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
}
#container:hover div.upper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}

HTML : 

<div id="container">
    <div class="lower">

        <h1>The Barn Owl</h1>
        <p>(Tyto alba) is the most widely distributed species of owl, and one of the most widespread of all birds. It is also referred to as Common Barn Owl, to distinguish it from other species in the barn-owl family Tytonidae. These form one of two main lineages of living owls, the other being the typical owls (Strigidae). T. alba is found almost anywhere in the world except polar and desert regions, Asia north of the Alpide belt, most of Indonesia, and the Pacific islands.</p>
        <p>Source <a href="http://en.wikipedia.org/wiki/Barn_Owl">Wikipedia</a>
    </div>
    <div class="upper">
        <img src="cssplay7/owl.jpg" alt="Barn owl" />
    </div>

</div>

CSS3 Card Flip backface disappears at end of transform

Ok so I figured out the problem, and yes it was simple. The problem is that I had a background color set on the card (vs on both faces of the card). I hope this answer my prove useful to someone in the future who may be Googling with this issue.

Edit: More exact answer

css:8 remove the background of the card

background: #fff;

And just just put background to the face

Can check the update of the same fiddle http://jsfiddle.net/9gPfz/2/


Related Topics

CSS Display Not Working

How to Simplify These CSS Selectors

Nested Flexbox Grid

Generating Vendor Prefixes in Less

CSS Style Not Recognizing Numbers

Highlight CSS Grid

How to Fix Hamburger Menu Animation

Bootstrap 3.0 Button in Navbar

Less: Better to Use Inheritance or Multiple Classes

Bootstrap 3: Using Img-Circle, How to Get Circle from Non-Square Image

How to Draw Vertical Separators in The Interior Gaps of a CSS Grid of Varying Columns

CSS Absolute Positioned Elements and Margins

Is It Possible in CSS to Transition Through a Third Color When Using a Hover Transition

Aligning CSS Arrow Boxes

Mysterious Bottom Border

Center Vertically The Content of a Div ( Not by Line-Height )

List-Style-Type:None Not Working! Get Rid of The Bullets

Remove Row Lines in Twitter Bootstrap


Leave a reply



Submit