Проблема WebKit с изогнутой границей родителя, не обрезающей дочерние элементы, подвергающиеся анимированному преобразованию

Подобно этот вопрос, у меня есть вложенный 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.

Есть ли обходной путь для этой проблемы?


html css css-transitions css-transforms
person Daniel Trebbien    schedule 20.09.2012    source источник
comment
в базах данных ошибок хрома и вебкита зарегистрировано около 20 ошибок, связанных с ошибками обрезки радиуса границы...   -  person Michael Mullany    schedule 21.09.2012

Ответы (1)


arrow_upward
0
arrow_downward

Интересно, что если вместо translate3d() использовать функцию преобразования 2D translate(), то после завершения перехода внутренний 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

person Daniel Trebbien    schedule 20.09.2012