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

A site was built where most of it relies on inverted DIVs with a 3D effect, updated to FF14 yesterday morning, and the effect was disrupted. It works fine in FF13, Chrome, IE9, etc.

I can’t publish the site I’m working on, but this site is broken in the same way - it jumps between the front and back of the card, and does not rotate

http://jigoshop.com/product-category/extensions/

Does anyone have any ideas?


EDIT: OK, maybe you should have included more information

I use this plugin to handle the flip

http://www.zachstronaut.com/projects/rotate3di/

I was mistaken when I said that this is the same technique as another website, because it looks like simple CSS, whereas this plugin is for jQuery. Here is a link to the demo that I threw together

http://olliesilviotti.co.uk/the-laboratory/cards/demo/


EDIT: this is how the request 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 is as follows:

<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>
+5
source share
1 answer

This is actually because Firefox follows the latest standards. From https://developer.mozilla.org/en/Firefox_14_for_developers

As it was removed from the draft standard, the braid support () function was removed from the transform property.

(This causes the entire ad to be dropped -moz-transform.)

, Bugzilla, , .

+4

All Articles