Safari 与 Chrome 上的 CSS 转换动画问题

标签 css animation z-index

我在 codepen 上复制了我的代码以更好地显示问题。

动画在 chrome 上运行良好,但在 safari 上运行不正常。

http://codepen.io/prismosoft/pen/akVzQg

当插入器旋转并使用 translateZ 推回时,我正在对包装器背景 div 应用缩放变换。现在即使 pusher 设置为: translateZ(-1000px)

我希望 wrapper 背景作为背景留在 pusher 后面。为什么 safari 的行为不像 chrome ?我错过了什么吗?

最佳答案

我终于发现这个问题很傻!由于 wrapper bg div 位于 wrapper div 中,其视角为 1500px。只需将包装器 bg 移到包装器 div 之外即可解决此问题。

关于Safari 与 Chrome 上的 CSS 转换动画问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38316345/

相关文章:

html - 如何使用应用了 CSS 的 Sweetalert?

javascript - 是否有一个 jQuery 函数可以查找元素的悬停计数?

css - 将 Z-Index 应用于 DropDownTree 不会影响它

css - 如何使用 z-index 使元素与 CSS 中的另一个元素重叠

css - 为什么具有z-index值的元素不能覆盖其子级?

jquery - 在悬停jquery的图像上显示div

html - 在标题中水平对齐 Logo 和导航菜单

html - 如何以不再水平居中的方式重新定位输入字段的文本?

jQuery every : loop an array, 通过 jQuery 附加文本并执行动画

javascript - 当两个预构建的 jQuery 动画序列都完成时,如何通过一个回调并行运行它们?