CSS transform animation issue on safari vs chrome

Question

I made a replica of my code on codepen to better show the issue.

The animation is working fine on chrome but not on safari.

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

I am applying a scale transform to the wrapper background div while the pusher is rotating and pushed back using translateZ. Now even though the pusher is set to: translateZ(-1000px)

I want the wrapper background to stay behind the pusher as a background. Why is safari not behaving like chrome ? Am I missing something ?

Answer 1

我终于发现这个问题傻了！由于包装器bg div位于包装器div内，其包含1500px的透视图。只需将包装器bg移到包装器div之外即可解决该问题。