CSSがAndroid Webkitのバックフェイスの可視性を切り替える

Question

CSSのトランジションと3D変換を使用するモバイルWebベースのページを開発しています。私はAndroid 3.1ウェブキットのバグに遭遇しました。私はそれに解決策を見つけることができません。

私は基本的にパラメータbackface-visibility: hidden;を持つ要素を持つようにCSSの回転を使用して、この要素にクラスを追加して変換を開始します。

#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/は、あなたがそれはあなたがやっていることに問題があるのか​​どうか結論付けるかを助けることができますブラウザの実装で。