why is cordova slow even for css transforms?

Question

I have been building a demanding hybrid app using cordova and have noticed that generally it is slow compared to when I run the website in mobile chrome. Some arguments I have heard which don't make sense to me:

1. css animations in mobile are slow (if this was true, the website would run slow in mobile chrome too, which is not true)

2. cordova is built on top of chrome (css transforms should have nothing to do with cordova, chrome should be able to render them just fine)

Does cordova by default restrict the amount of gpu chrome can use? Are there some settings I can tweak to improve css transition performance?

Answer 1

Chrome use the GPU only if you want him to use it.

An example :

.nav-show {
    transform:translate(200px,200px);
    transition: transform 500ms linear;
}

will not be render with the GPU. Instead, to force the GPU to work, you could use :

.nav-show {
    transform: translate3d(200px,200px,0);
    transition: transform 500ms linear;
}

for more information I found a cool article about it.

I don't know if there is anything else you can do about it.

I think, WebView are just a part of chrome after kit-kat. Moreover, your app is not running in the same environement when you debug it on chrome than "compiled" as a cordova application. In fact, cordova add a wrapper around your webview, plugins add functions that chrome don't have to do, etc...

Hope that help.