javascriptcordovacordova-3jqtouchzepto

Root cause of flickering problems of web-based mobile apps?


I just create a simple Apache Cordova app based on jqTouch und Zepto.

The app has 3 pages, one contains one form of 4 controls, the other pages 3 navigational elements and a few lines of text.

Using the jqTouch's apple and jqtouch themes, the app shows enormous amounts of flickering. During a page transition, certain parts of the screen render black.

jqTouch's innsbruck theme has a bit less flickering, but still is by no means ready to production.

The test-app doesn't use add-on javaScript. All navigation is done using #pageName links. Thus, user supplied JavaScript might be no problem here.

Interestingly: If I open the jqTouch demos using the built-in mobile browser, these execute with much less flickering.

Since the app is very simple - it not even uses additional styles or images -, I wonder what the root cause of these rendering problems is.

Tested using this environment:

Appcelerator Titanium - Poor too

Additionally, I gave Appcelerator Titanium a try using the rss example. Using the test device, the performance was poor too.

Appcelerator claims to compile to native. But due to poor performance, I guess they compile to WebViews too.

Do they? Or does Appcelerator Titanium compiles views and controllers to pure JavaCode?

Next try

Next, I'm going to give Xamarin a try.


Solution

  • First, the native browser will be more efficient than your Cordova app.
    Cordova uses a webview, which is less powerfull.

    That aside, the flickering issue you're seeing is fixable by rendering the element on the GPU.
    Via CSS you can specify :

    transform-style: preserve-3d;
    

    or

    transform: translate3d(0,0,0);
    

    With needed vendor prefixes.

    This will force your element to be rendered by the GPU. And will fix your flickering issue, but you must target your faulty element.