Firefox 14 breaks 3D 'card flip' effect - anyone know why?
css, firefox, javascript, jquery
Solution
This is actually because Firefox follows latest standards. From https://developer.mozilla.org/en/Firefox_14_for_developers
As it has been removed from the draft standard, support for the skew() function has been removed from transform property.
(This causes the entire `-moz-transform` declaration is dropped.)
Instead of reporting bug to Bugzilla, I'd say it should be reported to author of the plugin.
Problem
Built a site where a large part of it relies on flipping DIVs over with a 3D effect, upgraded to FF14 yesterday morning and the effect was broken. It works fine in FF13, Chrome, IE9, etc. I can't post the site I'm working on, but this site is broken in exactly the same way - it jumps between the front and back of the card rather than rotating http://jigoshop.com/product-category/extensions/ Anyone have any ideas? EDIT: OK, probably should've included more info I'm using this plug-in to handle the flipping http://www.zachstronaut.com/projects/rotate3di/ I was wrong when I said it was the same technique as that other website as that appears to be plain CSS whereas this plug-in is for jQuery. Here's a link to a demo I threw together http://olliesilviotti.co.uk/the-laboratory/cards/demo/ EDIT: This is how the query is used: ``` $('#boxes .box div.back').hide().css('left', 0); function mySideChange(front) { if (front) { $(this).parent().find('div.front').show(); $(this).parent().find('div.back').hide(); } else { $(this).parent().find('div.front').hide(); $(this).parent().find('div.back').show(); } } $('#boxes .box').live('mouseover', function() { if (!$(this).data('init')) { $(this).data('init', true); $(this).hoverIntent({ over: function () { $(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise', sideChange: mySideChange}); }, timeout: 1, out: function () { $(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange}); } }); $(this).trigger('mouseover'); } }); ``` The markup looks like this: ``` <div id="boxes"> <div class="box floated-box"> <div class="front">Random Number</div> <div class="back">I am the back of the card</div> </div> </div> ```