[Solved] CSS3 transform difference in Firefox and Chrome and IE

[Preface Studios Ltd]

I think it may have something to do with a pseudo element, but I’m not sure. I am having difficulties with the effect of a transform transition using css3. In Firefox v24, the effect works as I want it to – see the codepen here http://codepen.io/patrickwc/pen/aKEec but in Chrome and IE, the border effect of the links animate and then suddenly switch back into position. It is difficult to describe so the best way is to look at the effect in Firefox then in Chrome or IE.

I put the relevant section right at the bottom of the scss pane, if I make the width the same as the previous width it is animating from (20px) it works fine, but if I make it a bit larger, which is how I want it to work across all browsers, the lines animate but then jump back in IE/Chrome. Pretty annoying!

Any help or explanation as to the difference would be greatly appreciated.

[Preface Studios Ltd]

Excellent, thanks a lot. I fiddled around with the margin left and margin right properties and made the width a bit larger (85%, ml 5% and mr 10%) and now its perfect in IE too. Codepen doesn’t seem to work in the latest IE on Windows 7 for me.

Cheers

This is from the excellent codrops site, for anyone who likes the effect check them out: http://tympanus.net/Development/CreativeLinkEffects/

[Preface Studios Ltd]

Just as an aside to this, I found it a lot easier to use left: 10% and right: 10% instead of margin-left/margin-right, they could then be the same value then too http://codepen.io/patrickwc/pen/uFGlz

[Author]

Posts