WebKit でかなり奇妙でトリッキーなことが発生しています。バックグラウンドの別のdivが何もしていない間、divがY軸を中心に回転しているCSSアニメーションで遊んでいます。問題は、Safari では、回転している div がその上で回転するのではなく、最初の div によって切り取られることです。
説明するのは少し難しいので、ここに JSfiddle を示します。 http://jsfiddle.net/HMF6f/
3D トランスレーションを追加すると (以下のように) 修正できると言う人もいましたが、複雑なアニメーションの場合、これにより視覚的な外観が完全に変わり、私にはうまくいきません。
-webkit-transform: translate3d(0, 0, 100px) rotateY(-50deg);
Chrome がこれでどのように動作するかが気に入っており、同じ動作をしたいと思っています。これを達成する方法について何か考えはありますか？