Firefox移动：与translate3d动画元素从父容器流出 [英] Firefox Mobile: element animated with translate3d flows out from parent container

问题描述

我有我与translate3d变换animte的元素。父元素溢出：隐藏，但Firefox移动19.0.2动画过程中的动画元素是父元素的外部可见

I have an element which I animte with translate3d transform. The parent element has overflow: hidden, but on Firefox Mobile 19.0.2 during animation the animated element is visible outside of the parent element.

动画的顶属性，而不是 translate3d 工作，但它不是硬件加速，它是不够光滑。

Animating the top property instead of translate3d is working, but it's not hardware accelerated and it's not smooth enough.

它正常工作，在我测试过所有其他的移动和桌面浏览器。

It works fine on all other mobile and desktop browsers I tested on.

我想这是一个Firefox移动bug，但没有任何人有一种解决方法？

I guess this is a Firefox Mobile bug, but does anyone have a workaround for this?

下面是的jsfiddle链接来进行测试： http://jsfiddle.net/dioslaska/6h8qe/

Here is jsfiddle link for testing: 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解决

UPDATE: It looks like the problem is solved in Firefox 27.

推荐答案

很多搜索我发现了一个解决方法这里后：
<一href=\"http://jbkflex.word$p$pss.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/\" rel=\"nofollow\">http://jbkflex.word$p$pss.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/

After a lot of searching I found a workaround here: http://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/

添加背景和不透明度：1.99 来的容器元素似乎解决了问题。

Adding a background and opacity: .99 to the container element seems to solve the problem.

但仍然没有什么原因导致该问题的信息

But still no information about what causes the problem

这篇关于Firefox移动：与translate3d动画元素从父容器流出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！