transform 在 ios 里会改变元素实际大小

在ios下，用transform 会改变元素本来大小。你们有碰到过么？部分安卓以及桌面客户端不会。
举例子：

.box{
    width:100%;
    height:300px;
    background-color:#999;
}
.ele{
    width:90%;
    height: 90%;
    background-color:#ddd;
    animation: testCC 1s ease forwards;
}
@keyframes testCC{
    0% {transform: translate3d(100%,0,0);}
    100% {transform: translate3d(5%,0,0);}
}

<div class='box'>
    <div class='ele'>123456</div>
</div>

近距离观看效果：
http://jsbin.com/kusatagufa/edit?output

这样子在ios客户端以及mac 的safari 上body的宽度会变成屏幕原宽的两倍，而在绝大部分部分安卓和chrome里都是正常的。
求解。这个该怎么解决兼容的问题？
我目前的临时解决办法是设置body的overflow-y:scroll。但并不是每一个页面都需要隐藏x超出部分啊。

---

如果可能的话就在ele外面再加一层div.container，设置用overflow:hidden。