CSS3 変換と Google マップを Android 2.2 の WebView でうまく連携させることができません。これは、変換をテストするための 2 つのボタンを備えた fiddleです。デスクトップでクリックできるようにするには、Chrome で「タッチ イベントのエミュレート」を有効にする必要があります。私が使用しているデバイスの画面は 1024x600 です。
特に何もしなければ、変身開始時にちらつきます。ここで、変換を適用する要素に -webkit-backface-visibility: hidden を追加すると、すべてが滑らかでちらつきはありませんが、マップが信じられないほど遅くなり、かろうじてスクロールできなくなります。
-webkit-backface-visibility を表示に設定して削除することで、これを回避しようとしました。これは機能し、マップは再び正常になりますが、プロパティを設定するとちらつきが発生します。-webkit-perspective と -webkit-transform-style も試してみました。これも、変換が開始されたときにちらつきを取り除くように見えますが、削除するとちらつきも発生します。
また、ページ上の任意の要素に「-webkit-backface-visibility: hidden」を適用すると、変換開始時のちらつきが消えることにも気付きました。そのため、プロパティを含む小さな div を配置し、変換が完了したら、「display: none」で非表示にしました。これもちらつきの原因になります。
したがって、私の質問は、マップを遅くすることなく、-webkit-backface-visibility (変換をちらつきなくするために必要) と Google マップを使用するにはどうすればよいかということです。