html - Safari transform rotatex bug -


i have weird bug safari...

i have 3 divs captions, hidden rotatex(-91deg). on :hover caption comes down via rotatex(0deg). works in chrome etc. when hover in safari works on first div. when hover on 2. or 3. animation doesn't work.

check out 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: .25s linear;     -o-transition: .25s linear;     -moz-transition: .25s linear;     -webkit-transition: .25s linear;      backface-visibility: hidden;     -webkit-backface-visibility: hidden; /* chrome , 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 help.

tjl


Comments

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -