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

Answer 2

I tried the opacity: .99 hack but it was causing the layout to get pushed down..

so i tried another hack which i find that worked by applying this to your style sheet:

* {
   outline: 1px solid transparent;
}

Answer 3

I'm sorry, but I seems found a more simple solution. Without layout damage.

If scrolling container has height a more over than device height then this issue disappearing. It's has a different values for portrait and landscape orientation.

It's really work with Sencha Touch 2 at FF v.23 on Android 4.0.4 for me.