mac上的chrome中使用-webkit-transform的问题

Question

我有一个简单过渡的页面。我在左边的一个面板中滑动（类copyDeck），我有一个元素，其中包含一个覆盖背景图像的动画gif（类animatedTank）。我正在添加一个用js onload加载到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>

有没有人知道修复，解决方案或有任何人遇到此问题？