Question

Possible Duplicate:
Safari: Absolutely positioned DIVs not moving when updated via DOM

This answer to another question explains a small hack that lets you use jQuery to animate an element’s rotation.

In my situation, I wanted to animate an element’s rotation simultaneously with its top: and left: properties. So I came up with this fiddle.

function transformThing() {
    $('#thing').animate({ top: '+=50', left: '+=50', borderSpacing: -90 }, {
        step: function(now,fx) {
            if(fx.prop === 'borderSpacing') {
                $(this).css('-webkit-transform','rotate('+now+'deg)');
                $(this).css('-moz-transform','rotate('+now+'deg)'); 
                $(this).css('transform','rotate('+now+'deg)'); 
            }
        },
        duration: 1000
    }, 'swing');
}
$(document).ready(function() {
    $('#thing').click(function () {
        transformThing();
    });
});

Clicking the square should rotate it and move it down and to the right. And this is what it does, except in Safari. I’m running Safari 5.1.5 on Mac OS X 10.7.3, and only the rotation animates.

A coworker found this jQuery plugin that lets you do the same thing with cleaner syntax, but it exhibits the same problem.

If you look in the Web Inspector, you can see the top: and left: values changing, and in fact they change to the correct values; but they don’t affect the visual layout of the element unless you turn them off and on again.

Clearly, the answer is “Um, duh, it’s a Safari bug.” But is there any deeper explanation that might help me find a workaround, or anything else I can try?

Answer 1

the short answer is it wont work in safari. but the good news is it works fine if you use canvas like this example : http://beta.rallyinteractive.com/ the work animations rotate / transform / animate a sprite. Its really the only type of answer i can see anyone giving you.