WebKit 问题，父母的弯曲边框没有剪裁正在经历动画变换的孩子

Question

类似于this 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

有趣的是，如果你使用 2D translate() 变换函数而不是 translate3d()，那么在完成转换后内部 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