Firefox Mobile: элемент, анимированный с translate3d, вытекает из родительского контейнера

Question

У меня есть элемент, который я обманываю преобразованием 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; 
} 

UPDATE: Похоже, проблема решена в Firefox 27.

Answer 1

После долгих поисков я нашел обходной путь здесь: http://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/

Добавление background и opacity: .99 к элементу контейнера, кажется, чтобы решить эту проблему.

Но до сих пор нет информации о том, что приводит к возникновению проблемы

Answer 2

Я попытался непрозрачности: +0,99 хак, но он вызывает расположение, чтобы получить толкнул вниз ..

поэтому я попробовал другой хак, который я считаю, что работал, применяя это к вашей таблице стилей:

* { 
    outline: 1px solid transparent; 
} 

Answer 3

Извините, но я считаю более простым решение. Без повреждения макета.

Если прокручиваемый контейнер имеет высоту более, чем высоту устройства, то этот вопрос исчезает. Он имеет разные значения для портретной и альбомной ориентации.

Это действительно работает с Sencha Touch 2 в FF v.23 на Android 4.0.4 для меня.