macos - Mac 上の chrome での -webkit-transform に関する問題

Question

簡単なトランジションのあるページがあります。左からパネル (copyDeck クラス) をスライドさせており、背景画像をオーバーレイするアニメーション gif (animatedTank クラス) を含む要素があります。アニメーションを起動するために、js onload を使用して、loaded のクラスを body に追加しています。これはすべてのブラウザで問題なく機能しますが、Chrome の最新バージョンを搭載した Mac では問題があるとユーザーが指摘しました。スライドした div は実際に拡大され、要素を含むアニメーション GIF が下から上にスライドします (この要素またはその親にアニメーションは設定されていません)。

 h1, .copyDeck, h1 + span, div.mainContent ul{
-webkit-transform:translateX(-60%); 
-moz-transform:translateX(-60%);
-o-transform:translateX(-60%);
transform:translateX(-60%); 
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
 } 
.copyDeck{
-webkit-transition-delay:.125s;
-moz-transition-delay:.125s;
-o-transition-delay:.125s;
transition-delay:.125s;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: alpha(opacity=0);
     -moz-opacity: 0;
     opacity:0; 
     margin-top: 3em;
 }
 .loaded h1, .loaded .copyDeck, .loaded h1 + span, .loaded div.mainContent ul, .loaded blockquote, .loaded .CTA{
-webkit-transform: translateX(0);   
-moz-transform: translateX(0);  
-o-transform: translateX(0);    
transform: translateX(0);   
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity:1;  
}
.animatedTank {
    background: transparent url("Assets/transportation_imgSeq.gif") top left no-repeat;
    width: 212px;
    height: 369px;
    position: relative;
    top: -340px;
    left: 389px;
    float: left;
}  
<div class="mainContent">
        <div class="fadeOvr"></div>
        <h1>Level Tanks</h1>
        <span>&amp; A Better Bottom Line</span>
        <div class="copyDeck">
            <p>
                ...
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </div>
    <div class="animatedTank"></div>

誰かが修正、解決策を知っていますか、または誰かがこの問題を経験しましたか?