3

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

4

3 回答 3

5

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

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

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

于 2013-04-30T07:09:46.683 回答
0

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

所以我尝试了另一种技巧，我发现它可以通过将其应用于您的样式表来实现：

* {
   outline: 1px solid transparent;
}
于 2013-09-12T23:56:17.990 回答
0

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

如果滚动容器的高度大于设备高度，那么这个问题就会消失。它对于纵向和横向方向具有不同的值。

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

于 2013-09-23T22:18:57.160 回答