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

标签 css safari transform

这段非常简单的代码将 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/

最佳答案

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

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

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

与此同时,我发现了另外 5 个 Stack Overflow 问题有同样的问题。

关于css - 仅在 Safari 5.1 中损坏的简单 CSS 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11923012/

相关文章:

html - 媒体查询选择器元素的多个类有什么问题?或者这里发生了什么?

javascript - jQuery 过滤选择选项在 Safari 中不起作用(但在 Chrome 和 FF 中有效)

ios - 在 iphone、safari 上,输入内容时屏幕变白

webkit 转换 : how to roate on Z axis, 但不围绕中心?

CSS3 变换顺序很重要 : rightmost operation first

CSS3 动画向后下沉然后向左移动

css - 将导航选项卡添加到 Tailwind CSS 导航栏

css - 悬停时无法点击子菜单

ios - Vuetify 数据表在 Safari 中呈现问题

html - 带 div 的三 Angular 形