Safari Webkit 3d transform-problem

[rwlmayer]

Hej!

 

Jag håller på att utveckla en sida där det krävs att safari har en 3d rotation, d.v.s. css3.

 

Här är min kod:

 

Style.css

/* FLIP */

#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>

 

 

 

och med hjälp av javascript lägger jag till rotated style och tar bort den också, alltså en enkel toggle funktion.

 

Problemet är som följd att chrome visar detta ganska bra förutom bakgrundsbilden som hackar, men Safari, efter jag roterar div:n med 180 grader så är texterna osynliga. Jag kan till och med markera texten och kopiera den, men den syns inte, oavsett hur jag lägger till nya stilar för .back div:n.

 

Är det någon här som har erfarenhet med detta?