关于translate3D动画在iphone上闪屏的问题

前段时间做了一个夹娃娃的页面，娃娃所在的跑道是一直在运动的，我用的是css3-transform（translate3d）实现的运动，但是发现在苹果手机上面页面会有闪动（跑道到头后回来的瞬间），于是百度了很多文章终于找到了原因和解决办法，具体可以参见这篇文章
html结构以及css类似如下：

.road_box{
    /*向右运动*/
    position: absolute;
    right:0;
    top:0;
    width:200px;
    height:50px;
    -webkit-animation: "roadmove" 10s linear infinite;
}
.road{
    float:left;
    width:100px;
    height:50px;
    position:relative;
}
.road img{
    position:absolute;
    top:10px;
    left:;
    /*不同img，不同的left*/
}
@-webkit-keyframes "roadmove"{
    0% {
        -webkit-transform:translate3d(0,0,0);
    }
    100%{
        -webkit-transform:translate3d(100px,0,0);
    }
}
<div class="road_box">
    <div class="road">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
    </div>
    <div class="road">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
    </div>
</div>

按照上面链接文里的解决办法就是，给road加上这个
-webkit-transform: translate3d(0,0,0);
闪动问题的确是好了，但是发现两个road之间出现了一条很小的缝隙，我是给父级road_box加了一个同样图片的背景 来掩饰解决的。
另外，千万不要加这个

.road_box{
    -webkit-transform-style: preserve-3d;
}
.road{
    -webkit-backface-visibility: hidden;
}

上面链接文里说的很明白，这是给translate2d加的，如果你给3d加了这个，在safari浏览器上就会看不到img，或者很大。