Firefox 14 breaks 3D 'card flip' effect - anyone know why?

Question

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>

Answer 1

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.