Firefox Mobile：使用 translate3d 动画的元素从父容器流出答案

【问题标题】：Firefox Mobile: element animated with translate3d flows out from parent containerFirefox Mobile：使用 translate3d 动画的元素从父容器流出
【发布时间】：2013-03-14 09:07:48
【问题描述】：

我有一个元素，我用 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 中已解决。

【问题讨论】：

标签： android css firefox mobile translate3d

【解决方案1】：

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

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

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

【讨论】：

它可以在没有背景的情况下工作，但对 Firefox 来说非常有用。这个问题真的很烦人。

【解决方案2】：

我尝试了 opacity: .99 hack，但它导致布局被下推..

所以我尝试了另一种 hack，我发现通过将它应用到你的样式表可以工作：

* {
   outline: 1px solid transparent;
}

【讨论】：

【解决方案3】：

对不起，我似乎找到了更简单的解决方案。无布局损坏。

如果滚动容器的高度大于设备高度，则此问题将消失。它对于纵向和横向具有不同的值。

对我来说，在 Android 4.0.4 上的 FF v.23 上使用 Sencha Touch 2 真的很有效。

【讨论】：