CODEWITHSUNDEEP
htmlcss
Jordy Senssen
Jordy Senssen

Reputation: 171

Flip animation not working in Safari

I have made an animated profile picture and when hovered on it flips around and shows the backside. It works perfectly in Firefox and Chrome, but not in Safari.

It does flip around, but the image changes back to the frontside but facing in opposite direction.

this is what I see 1 second after I hover on it. (This is the front-side, but flipped horizontally)

enter image description here

Link: http://www.ik-ben-zzp.nl/testsite/index.php

Here is the HTML CSS of the profile picture.

What is the problem here?

Thanks

Ps. Tested on Safari iPad

.roundedImage {
	overflow:hidden;
	width: 200px;
	height:200px;
	margin-left: auto;
	margin-right: auto;
    -webkit-animation:pop-in 0.8s;
    -moz-animation:pop-in 0.8s;
    -ms-animation:pop-in 0.8s;

}

.flip-container {
	perspective: 1000;
	z-index:3;
	margin-bottom:200px;
}
	
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
   		-ms-transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 200px;
	height: 200px;
	margin-left:auto;
	margin-right:auto;
	
}


.flipper {
  transition: 0.6s;
  -webkit-transition: 0.6s;
  -ms-transition: 0.6s;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;	
}


.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}


.front {
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}


.back {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
	}
	
.front div, .back div {
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
	-webkit-animation:pop-in 0.8s;
    -moz-animation:pop-in 0.8s;
    -ms-animation:pop-in 0.8s;
	border: 4px solid white;
}
<div class="flip-container" ontouchstart="this.classList.toggle('hover')">

<div class="roundedImage">

<div class="flipper">

<div class="front">
<div style="background: url(Images/ProfileFront.jpg); height:200px; background-size: cover;"></div>
</div>

<div class="back">
<div style="background:url(Images/ProfileBack.jpg); height:200px; background-size:cover;"></div>
</div>

</div>	<!--FLIPPER-->
</div>	<!-- ROUNDED IMAGE -->
</div> 	<!-- FLIP CONTAINER -->

Upvotes: 0

Views: 1579

Answers (2)

jake
jake

Reputation: 136

Remove the ontouchstart="this.classList.toggle('hover');" in all your div's in html and add below javascript. you can comment 'return false' incase you have any serverside clickable items inside the divs of 'front' or 'back to work

$('.flip-container').click(function(){
    $(this).find('.flipper').addClass('hover').mouseleave(function(){
        $(this).removeClass('hover');
    });
    return false;
});

Upvotes: 0

Arul
Arul

Reputation: 491

Add -webkit- prefixes to all necessary css property. You missed to 'backface-visibility'.

Upvotes: 1

Related Questions