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

У меня есть элемент, который я анимирую с translate3d transform. Родительский элемент имеет 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.

Источник

3 ответа

Решение

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

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

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

Источник

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

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

* {
   outline: 1px solid transparent;
}
Источник

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

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

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

Источник
Другие вопросы по тегам