【cordova】android（crosswalk）で動作を軽くするcss設定

cssやjQueryでアニメーションさせる場合や、要素を動的に追加する場合などでは、その要素が大きいと動作が重くなります。
例えば、$("#id").append("xxx") などで動的に要素を追加する場面や、それをスクロールして表示する場面などです。
iosでは問題になりませんでしたが、（私のテスト環境の）androidではスクロールも重いし、途中で要素がホワイトアウトしてしまいました。ちなみに背景色・文字色によっても重さが違いました。

色々と試してみた結果、androidのみ対象要素に以下の設定を追加すると改善されました。

transform:translateZ(0);

ただしiosだと動作が重くなってしまうので、場合わけが必要です。
プラットフォームがandroidかiosかの判別は、Cordova Device Plugin を使用します。プラグインを有効にすると、プラットフォームに応じて以下の変数に "Android" , "iOS" などが格納されます。

window.device.platform

※詳細は公式ドキュメント参照
http://cordova.apache.org/docs/en/6.x/reference/cordova-plugin-device/index.html#page-toc-source

よって、要素を動的に追加する際には以下のように、

if ( window.device.platform.match(/Android/) ) {
   $(".your_class").css({
      "transform": "translateZ(0)",
      "-webkit-transform": "translateZ(0)",
    });
}

などのようにして、androidのときのみcssを追加するようにします。

（※プラットフォームごとに動作を変えるケースが多い場合は、プラットフォームの判別部分は別途関数にしておいたほうがわかりやすいと思います。）

（※私の場合はこれで何とか解決しましたが、全ての端末での動作チェックをしたわけではありません。もしかしたら有効ではない場面も考えられますので注意してください）