I've encountered an interesting issue in Chrome (works perfectly in Firefox), and I'm unsure how to resolve it.
http://jsfiddle.net/GkXA7/1/ When hovering over the card, the image appears flipped on the backside. However, if I adjust the image's position from the right, this issue doesn't occur!? http://jsfiddle.net/GkXA7/2/
HTML
<div class="flip-container">
<div class="flipper">
<div class="front card">
<img width="40" height="40" src="http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg">
<h3>Front</h3>
</div>
<div class="back card">
<h3>Back</h3>
</div>
</div>
</div>
CSS
/* Flip Effect */
.flip-container {
perspective: 1000;
margin: 0 auto 20px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
.flip-container {
width: 400px;
height: 200px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
-webkit-transform-style: preserve-3d;
}
/* hide back of pane during swap */
.flipper .card {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 200px;
}
.flipper .front{
background-color:green;
}
.flipper .back{
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
background-color:red;
}
.front img{
position: absolute;
top:10px;
left:10px;
}
Is there a way to prevent the image from appearing on the flip side while still being able to position it absolutely?