CSS переходы видимость задней части в Android Webkit

Question

Я занимаюсь разработкой мобильной веб-страницы, которая использует CSS-переходы и 3D-преобразования. Я столкнулся с ошибкой в ​​Android 3.1 Webkit и, похоже, не могу найти решение этой проблемы.

Я использую вращение CSS, так что у меня есть элемент с параметром backface-visibility: hidden;, а затем я добавляю класс к этому элементу, чтобы начать преобразование.

#flipper {
    -webkit-transform-origin: center center;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    -webkit-backface-visibility: hidden;
}
.rotating-cover-effect {
    -webkit-transform: rotateY(180deg);
}

Проблема в том, что в Android (в частности, 3.1) задняя сторона #flipper все еще видна после поворота. В iOS или в настольных браузерах Webkit (например, Chrome, Safari) фон скрыт правильно.

Это ошибка в Android Webkit или я что-то не так делаю?

Answer 1

Вы делаете приложение для Android?Если это так, вам нужно включить аппаратное ускорение, добавив его в свой AndroidManifest.xml:

<application android:hardwareAccelerated="true" ...>

Если вы создаете настоящий веб-сайт, http://thewebrocks.com/demos/3D-css-tester/ может помочь вам решить, является ли это проблемойс тем, что вы делаете, или с помощью браузера.