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

<li id="post" class="block" style="overflow: hidden;">
            <div class="front side" style="background: url(<?php echo $large_image_url[0]; ?>);"">
                <div class="post_content" style="height: 514px; overflow: hidden; padding: 20px;">
                    <h2 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2>
                    <?php the_content(); ?>
                </div>
                <div class="post_more" style="text-align: right; height: 46px;">
                    <a style="cursor: pointer;"><img style="height: 46px; padding: 0; margin: 0;" src="<?php bloginfo('template_url'); ?>/images/page_turn.png" /></a>
                </div>
            </div>
            <div class="back side">
                <div class="post_content" style="height: 514px; overflow: hidden; padding: 20px;">
                    <?php multieditDisplay('Baksidan');?>
                </div>
                <div class="post_more" style="text-align: right; height: 46px;">
                    <a style="cursor: pointer;"><img style="height: 46px; padding: 0; margin: 0;" src="<?php bloginfo('template_url'); ?>/images/page_turn_back.png" /></a>
                </div>
            </div>
    </li>

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.