Webkit transform problem (SAFARI)

[syron1988]

Hello guys!

I’ve been searching google the whole day for finding a solution for my problem and I found 1 article at apple support, but they did not get it solved, so I am asking here cause I know some great developers are here!

My problem is as followed:
I have a list of div:s, the first div has an id #post, this #post should, only in safari, make a 180 degree transform and change the content of the div. That means it is like a card with a front and a back side.

It works on chrome, except the background, which gets kinda laggy while flipping, but that’s not a concern since chrome will not be supported for the flip.

The problem I have is, that after the flip, safari gives opaque 0 (not in real css) to the content of it. I can highlight the text with my mouse, unable to see it, but with CTRL + c I can copy and +v paste it. So it is existing at correct position, but not showing… I hope you understand my problem.

My code is as followed:

#scroller is the basic container of all div:s I talked about at the beginning.

CSS

#scroller {

-webkit-perspective: 2000;

}

.block {

z-index: 99;

position: position;

-webkit-transform-style: preserve-3d;

transition: all .4s ease-in-out;

-moz-transition: all .4s ease-in-out;

-webkit-transition: all .4s ease-in-out;

}

.rotated{

-webkit-transform: rotateY(180deg);

}

.side{

-webkit-backface-visibility: hidden;

}

.front{

z-index: 900;

-webkit-transform: rotateY(0deg);

-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

}

.back{

z-index: 800;

-webkit-transform: rotateY(-180deg);

-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden;



}

.back p {

background-color: white;

color: black;

opacity: .5;

}

PHP Code

And the javascript toggle function:

$("#post .post_more a").click(function() {

if(document.getElementById("post").className == "block"){

document.getElementById("post").className += " rotated";

}

else{

document.getElementById("post").className = "block";

}

});

Does anyone know what Im doing wrong?

Thanks in advantage.

[Author]

Posts