Firefox Mobile: element animated with translate3d flows out from parent container

Question

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.

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.

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

Here is jsfiddle link for testing: http://jsfiddle.net/dioslaska/6h8qe/

The minimal test case:

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;
}

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

Answer 1

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/

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

But still no information about what causes the problem