android - 火狐移动版 : element animated with translate3d flows out from parent container

Question

我有一个元素，我使用 translate3d 变换对其进行了动画处理。父元素具有 overflow: hidden，但在 Firefox Mobile 19.0.2 上，动画期间动画元素在父元素外部可见。

动画 top 属性而不是 translate3d 是可行的，但它不是硬件加速的，而且不够流畅。

它在我测试过的所有其他移动和桌面浏览器上运行良好。

我想这是 Firefox Mobile 的一个错误，但有人对此有解决方法吗？

这是用于测试的 jsfiddle 链接:http://jsfiddle.net/dioslaska/6h8qe/

最小测试用例:

HTML:

<div id="cont">
    <div id="translate">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>

CSS:

#cont {
    width: 50px;
    height: 90px;
    border: 1px solid black;
    margin: 20px;
    overflow: hidden;
}

#translate {
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
}

#translate.a {
    -webkit-transform: translate3d(0, -60px,0);
    -moz-transform: translate3d(0, -60px,0);
}

#translate div {
    height: 30px;
    line-height: 30px;
    text-align: center;
}

更新:看来问题已在 Firefox 27 中解决。

Answer 1

经过大量搜索，我在这里找到了解决方法: http://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/

向容器元素添加 background 和 opacity: .99 似乎可以解决问题。

但仍然没有关于导致问题的信息