WebKit 问题，父级的弯曲边框未剪切正在经历动画转换的子项

Question

与这个问题类似，我有一个嵌套的div，它是其父级的完整宽度和高度。但是，与其他问题不同，我想对嵌套div 的翻译进行动画处理，因此建议的 position：static 修复不适用。

以下是我的测试用例：

.HTML：

<div id="theBox">
<div id="innerBox"></div>
</div>​

.CSS：

#theBox {
    border: 1px solid black;
    border-radius: 15px;
    width: 100px;
    height: 30px;
    overflow: hidden;
}
#innerBox {
    width: 100%;
    height: 100%;
    background-color: gray;
    -webkit-transition: -webkit-transform 300ms ease-in-out;
    -moz-transition: -moz-transform 300ms ease-in-out;
}

JavaScript：

setTimeout(function () {
    var innerBox = document.getElementById("innerBox");
    var transformText = "translate3d(70px, 0, 0)";
    innerBox.style.webkitTransform = transformText;
    innerBox.style.MozTransform = transformText;
}, 1000);

http://jsfiddle.net/pv2dc/

这在 Firefox 15.0.1 中工作正常，但在 Safari 6.0.1 中，内部div 不会被父div 的弯曲边框剪裁。

这个问题有解决方法吗？

Answer 1

有趣的是，如果您translate3d()不是使用 2D translate() 变换函数，而是使用 2D 变换函数，则在过渡完成后会裁剪内部div：http://jsfiddle.net/pv2dc/1/

因此，一种解决方法是不使用过渡，而是自己对变换进行动画处理：

.CSS：

#theBox {
    border: 1px solid black;
    border-radius: 15px;
    width: 100px;
    height: 30px;
    overflow: hidden;
}
#innerBox {
    width: 100%;
    height: 100%;
    background-color: gray;
}

JavaScript：

(function() {
    var requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();
setTimeout(function () {
    var start = window.mozAnimationStartTime || Date.now();
    function step(timestamp) {
        var progress = timestamp - start;
        var transformText = "translate(" + (70 * progress / 300) + "px)";
        if (progress >= 300) transformText = "translate(70px)";
        innerBox.style.webkitTransform = transformText;
        innerBox.style.MozTransform = transformText;
        if (progress < 300) {
            window.requestAnimationFrame(step);
        }
    }
    window.requestAnimationFrame(step);
}, 1000);

http://jsfiddle.net/pv2dc/2/

此示例使用线性计时函数，但也可以使用缓入功能。请参阅： http://www.netzgesta.de/dev/cubic-bezier-timing-function.html