CODEWITHSUNDEEP
javascripthtmlcss
Nick0989
Nick0989

Reputation: 459

Flipping a card over with CSS/JS Firefox issue

I've got an issue in Firefox.

This works in chrome, and safari and mobile.

When you click the card, it flips over, but you can still see the "click to flip" front facing part of the card when you click on it to flip it over. It shows up as upside-down text. I've tried targeting the css to hide/show when the card css has the class of "flipped", but it still won't disappear.

Again this is a Firefox issue. Any suggestions would be great. 

$('.card').click(function(){
 	   $(this).toggleClass('flipped');
	});
.card-height2: {
	height: 281px;
}
.flip {
	-webkit-perspective: 800;
	perspective: 800;
	position: relative;
	cursor: pointer;
}

.flip .card.flipped {
	-webkit-transform: rotatex(-180deg);
	transform: rotatex(-180deg);
	background: transparent;
}

.flip .card {
	height: 195px;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: 0.5s;
	transform-style: preserve-3d;
	transition: 0.5s;
}

.flip .card .face {
	-webkit-backface-visibility: hidden ;
	backface-visibility: hidden ;
	z-index: 2;

}

.flip .card .front {
	position: absolute;
	width: 100%;
	z-index: 1;
	background: #2B5168;
}

.flip .card .back {
	-webkit-transform: rotatex(-180deg);
	transform: rotatex(-180deg);
	padding-left: 5%;
}

.flip .card .back2 {
	-webkit-transform: rotatex(-180deg);
	transform: rotatex(-180deg);
	padding-left: 5%;
	padding-bottom: 13%;
}

.inner {
	margin:0px 
	!important;
}

div.card.card-1 {
	height: 195px;
	background: transparent;
	background: #2B5168;
}

.s7-small {
	font-size: 14px;
}

.s7-percents {
	color: #80c3db;
	font-size: 51px;
	font-weight: 800;
	margin: 0px;
}

.s7-heading1 {
	font-size: 27px;
	text-align: left;
	margin-top: 55px;
	margin-left: 50px;
}

.s7-heading2 {
	font-size: 27px;
	margin: 0px;
}
  
.s7-para {
	font-size: 27px;
	color: #85B9CE;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div class="row">
  <div class="col-lg-6 p-0">
    <div class="flip s7-card-1">
      <div class="card card-1"> 
        <div class="face front"> 
          <div class="inner"> 
            <p class="s7-heading1">Click to flip</p>
          </div>
        </div> 
        <div class="face back"> 
          <div class="inner"> 
            <p class="s7-small">Flipped!</p>
          </div>
        </div>
    </div>	 
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

http://jsbin.com/yobeweseri/edit?html,css,js,output

Upvotes: 2

Views: 2229

Answers (1)

Brad
Brad

Reputation: 525

Add transform: rotateX(0deg); to the .face.front container.

See this answer: Backface-Visibility Not Working Properly in Firefox (Works in Safari)

Upvotes: 7

Related Questions