WebKit issue with the parent's curved border not clipping children undergoing an animated transform

Question

Similar to this question, I have a nested div that is the full width and height of its parent. However, unlike the other question, I want to animate a translation of the nested div, so the suggested fix of position:static is not applicable.

The following is my test case:

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/

This works fine in Firefox 15.0.1, but in Safari 6.0.1, the inner div is not clipped by the parent div's curved border.

Is there a work-around for this issue?

Answer 1

Interestingly, if instead of translate3d() you use the 2D translate() transform function, then the inner div is clipped after completion of the transition: http://jsfiddle.net/pv2dc/1/

One work-around, then, is to not use transitions, but animate the transform yourself:

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/

This sample uses a linear timing function, but the ease-in-out function can also be used. See: http://www.netzgesta.de/dev/cubic-bezier-timing-function.html