Simple CSS transform broken in Safari 5.1 only

Question

This very simple code applies a WebKitTransform rotate() to some elements in a transition.

http://jsfiddle.net/uRWsp/3/

This works in Chrome, Firefox, Opera, IE9, Safari 5.0 and Safari 6.0

However in Safari 5.1 and ONLY in Safari 5.1, it's broken. It only transitions the very first card.

Using JavaScript instead of CSS do to the transitioning/animation results in the same problem: http://jsfiddle.net/rGdjz/12/

Answer 1

So I found a solution here: Safari: Absolutely positioned DIVs not moving when updated via DOM

Basically if I set the transform rotate in a setTimeout, then it works. Now this only fixes the JavaScript version: http://jsfiddle.net/rGdjz/13/

The other thread mentions if I do the top and left setting as a translate operation (instead of setting left/top) then that will fix it in the CSS version. I have not investigated whether that is true or not.

In the mean time, I found 5 other Stack Overflow questions with the same problem.