iOS - CSSのキーフレームがアニメーション化されない、時々だけ

Question

私は今、私のために小さなサイトを構築しています。ナビアイテムをクリックすると、古いコンテンツはフェードアウトしながら左にスライドします。新しいコンテンツは、フェードインして100％にズームしながら右からスライドする必要があります。 （デスクトップ上のライブサンプルを見る）

私のMacではすべてがうまくいっていますが、私のiPhoneではフェードアウトアニメーション（サファリ&クロム）だけが動作します。さて、フェードインアニメーションは、サイトをロードすると動作することがありますが、コンテンツを切り替える場合は動作しません。アニメーションの期間中は何もないので、コンテンツはキーフレームの100％ですぐに表示されます。

ライブ例：http://haeki.com/haeki/ - ナビゲーションは100％では動作しませんが、この例では十分です。 :-)

誰かが助けますか？ */

@keyframes fadeOut { 
     0%{ 
     transform: scale(1) translate3d(0,0,0); 
     opacity: 1; 
     } 
     25% { 
     transform: scale(1) translate3d(0,100px,-100px); 
     opacity: 0.5; 
     } 
     75% { 
     transform: scale(1) translate3d(-500px,100px,-100px); 
     opacity: 0; 
     } 
     100% { 
     transform: scale(1) translate3d(-500px,100px,-100px); 
     opacity: 0; 
     display: none; 
     } 
    } 

    @-webkit-keyframes fadeOut { 
     0%{ 
     -webkit-transform: scale(1) translate3d(0,0,0); 
     opacity: 1; 
     } 
     25% { 
     -webkit-transform: scale(1) translate3d(0,100px,-100px); 
     opacity: 0.5; 
     } 
     75% { 
     -webkit-transform: scale(1) translate3d(-500px,100px,-100px); 
     opacity: 0; 
     } 
     100% { 
     -webkit-transform: scale(1) translate3d(-500px,100px,-100px); 
     opacity: 0; 
     display: none; 
     } 
    } 

    @keyframes fadeIn { 
     0%{ 
     transform: scale(1) translate3d(500px,100px,-100px); 
     opacity: 0; 
     } 
     25% { 
     transform: scale(1) translate3d(500px,100px,-100px); 
     opacity: 0; 
     } 
     75% { 
     transform: scale(1) translate3d(0,100px,-100px); 
     opacity: 0.5; 
     } 
     100% { 
     transform: scale(1) translate3d(0,0,0); 
     opacity: 1; 
     } 
    } 
    @-webkit-keyframes fadeIn { 
     0%{ 
     -webkit-transform: scale(1) translate3d(500px,100px,-100px); 
     opacity: 0; 
     } 
     25% { 
     -webkit-transform: scale(1) translate3d(500px,100px,-100px); 
     opacity: 0; 
     } 
     75% { 
     -webkit-transform: scale(1) translate3d(0,100px,-100px); 
     opacity: 0.5; 
     } 
     100% { 
     -webkit-transform: scale(1) translate3d(0,0,0); 
     opacity: 1; 
     } 
    } 
    .inactive{ 
    -webkit-animation: fadeOut 2s forwards; 
    animation: fadeOut 2s forwards; 
    } 
    .active{ 
    -webkit-animation: fadeIn 2s forwards; 
    animation: fadeIn 2s forwards; 
    } 

Answer 1

/*アニメーションコードは、iOS 9.2 - バグました。 9.3に更新され、機能しました。優秀な3時間.. :-D