Search code examples
csscordovahardware-acceleration

Hardware Acceleration Cordova Android

I am making small circle divs with a 7px diameter

I applied the hardware accelerated = true in my config and I have added

-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translateZ(0px);

to the css class of my div element. Why does it still display it in this "low quality"-style?

On other mobile devices I have tested on they where rendered smoother. I am aware that it does depend on the hardware of the device but could someone please elaborate how to correctly apply the above, so it at least "would" work if the hardware requirements are met?

Thanks in advance.

Solution

  • The Cordova WebView is the system webview and thus, it is different depending on the Android OS version you run your app on. Could you tell us what version of Android is the device you are testing on?

    Also, when you mean "on other mobile devices I have tested on" which are those? Other Android devices with other Android OS versions or iOS devices? Please, provide some more feedback.

    Anyway, the problem could be that the webview does not support hardware acceleration CSS 3D transformations. I would recommend you to check a solution like WebView+ from CocoonJS or Crosswalk from Intel. The WebView+ is a webview based on Chromium for Android 4.0+ devices, so no more fragmentation on Android (the same environment no matter what Android OS version you execute your app on) and all the power of Chrome executing your app. It is very easy to test using the CocoonJS Launcher: https://play.google.com/store/apps/details?id=com.ideateca.cocoonjslauncher&hl=en

    Go to Your App and point to the URL where your app is to be able to test it (similar to a web browser). Then you can compile the final app using the CocoonJS Cordova Command Line: http://support.ludei.com/hc/en-us/articles/202568973-First-steps-with-CocoonJS-CLI or the CocoonJS Cloud compiler for Cordova apps.

    They also provide the WKWebView for iOS 8 with the WebView+ (just in case you are also interested in iOS with improved performance): http://blog.ludei.com/build-phonegap-cordova-apps-using-the-wkwebview-right-now/

    You can also test it using the CocoonJS Launcher for iOS: https://itunes.apple.com/us/app/cocoonjs-by-ludei/id519623307?mt=8

    Hope this helps.