Safari transform rotatex bug

Safari transform rotatex bug

I have a weird bug with safari...
I have 3 divs with captions, which are hidden with rotateX(-91deg). On
:hover the caption comes down via rotateX(0deg). It works perfectly in
Chrome etc. When i hover in safari it works only on the first div. When i
hover on the 2. or the 3. the animation doesn't work.
Check out my demo: http://jsbin.com/aseced/28/edit
HTML:
<article class="tile2x1">
<section class="caption"></section>
</article>
<article class="tile2x1">
<section class="caption"></section>
</article>
<article class="tile2x1">
<section class="caption"></section>
</article>
CSS:
[class*="tile"] > section.caption {
padding-top: 20px;
width: 100%;
background-color: blue;
height: 100px;
transform-origin: top;
-o-transform-origin: top;
-moz-transform-origin: top;
-webkit-transform-origin: top;
transform: perspective( 600px ) rotateX( -91deg );
-o-transform: perspective( 600px ) rotateX( -91deg );
-moz-transform: perspective( 600px ) rotateX( -91deg );
-webkit-transform: perspective( 600px ) rotateX( -91deg );
transition: all .25s linear;
-o-transition: all .25s linear;
-moz-transition: all .25s linear;
-webkit-transition: all .25s linear;
backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome and Safari */
-moz-backface-visibility: hidden; /* Firefox */
-ms-backface-visibility: hidden; /* Internet Explorer */
}
[class*="tile"]:hover > section.caption {
transform: perspective( 600px ) rotateX( 0deg );
-o-transform: perspective( 600px ) rotateX( 0deg );
-moz-transform: perspective( 600px ) rotateX( 0deg );
-webkit-transform: perspective( 600px ) rotateX( 0deg );
}
Thanks for any help.
TJL