仅在 Safari 5.1 中损坏的简单 CSS 转换

Question

这个非常简单的代码将 WebKitTransform rotate() 应用于转换中的某些元素。

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

这适用于 Chrome、Firefox、Opera、IE9、Safari 5.0 和 Safari 6.0

但是，在 Safari 5.1 中并且仅在 Safari 5.1 中，它已损坏。它只会转换第一张卡片。

使用 JavaScript 而不是 CSS 来处理过渡/动画会导致同样的问题：http://jsfiddle.net/rGdjz/12/

Answer 1

所以我在这里找到了解决方案：Safari: Absolutely positioned DIVs not moving when updated via DOM

基本上，如果我在 setTimeout 中设置变换旋转，那么它就可以工作。现在这只修复了 JavaScript 版本：http://jsfiddle.net/rGdjz/13/

另一个线程提到如果我将顶部和左侧设置作为翻译操作（而不是设置左侧/顶部），那么它将在 CSS 版本中修复它。我没有调查这是否属实。

同时，我发现了 5 个其他 Stack Overflow 问题也有同样的问题。