I am developing an Android app using web technologies and the CSS transitions (quite essential to the functionality of the app, since they're responsible for scrolling and swiping pages) are quite sluggish.
According to information found on the internet, CSS transitions are not hardware accelerated unless transformed 3-dimensionally. I found many articles saying that I should put "-webkit-transform: translateZ(0);" to my animated elements.
However, the Webkit in older Android versions (below 3.0) doesn't support 3D transformations.
Can I embed a newer version of WebKit with my app?
Can I embed a newer version of WebKit with my app?
In theory, perhaps.
You would have to completely rewrite WebKit to use something that the NDK supports for output (e.g., OpenGL) and embed it in your app. I estimate that this will take >100 developer-months, so if you have a large team and matching budget, you are welcome to try this. By the time you complete the work, the "older Android versions" will be obsolete, and you will not need the code.
Hence, from a practical standpoint, either redesign the apps such that CSS transitions are no longer "essential to the functionality of the app", or limit your app to Android 3.0+ and wait for the Android user base to catch up.
Related
I need to create a simple app that acts like a launcher and keeps the chrome browser (must be chrome due to heavy HTML5) as main app with a certain url with a device that runs Android 4.2 and cannot be upgraded neither rooted. Best would be if I could embed the chrome browser frame and hide all controls.
I already managed to write launcher apps with XE6 which minimize the risk of accidently leaving the app by interception "back" and being the default home app.
I know of the CEF in Windows, is there something similar under android?
The FMX mobile browser component TWebBrowser is a wrapper around the native platform browser. On Android that means it wraps WebView which is a modern WebKit browser with HTML 5 support.
So, it seems to me that the obvious way forward is to use TWebBrowser. From what you've described of your app, however, it might be simpler to code it in Java. It would certainly be more lightweight and you'd be sure to have easy access to all WebView functionality.
WebView wraps Android WebKit before Android 4.4. With Android 4.4 and newer WebKit wraps Chromium. For your 4.2 device limited HTML5 support is already available in WebKit.
Some advices are collected on http://blog.guya.net/2013/10/24/the-pains-and-remedies-of-android-html5/
If I skip all advices which are for pre 4.2 devices, the remaining list of issues and remedies is quite short.
None of the parents HTML elements to the canvas should have overflow: hidden or overflow:scroll
Wait a few (~100 millisecond) after the DOM is ready to ask it what’s the window size is.
Styling text-inputs that has focus: https://stackoverflow.com/a/9464837
I'm trying to build a website using the technique described in this article: pure CSS parallax.
This technique requires browsers to support 3D transforms (and specifically perspective/preserve 3d).
It's working on the majority of devices and browsers no problem, and where it doesn't it is easy to detect if it'll break (such as lack of transform-style: preserve-3d in IE, or lack of 3d transforms at all) and fix it accordingly.
However, one browser stands out in exceptionally f*******g me over when I try and make it compatible to any degree - Android stock browser. Versions of the browser on Android 4+ support css3d transforms but are completely incapable of rendering them properly, with the big bug being that -webkit-perspective: 1px, while technically supported has absolutely no effect in this case (transform: translateZ(xpx) elements).
As far as I see it I have two options:
Detect the Android stock browser and serve CSS accordingly
Detect perspective not to be working and serve CSS accordingly (unlikely)
I've yet to find a foolproof/futureproof, elegant way of detecting the Android browser on the back end with PHP, with the only options being hefty API's and what I consider to be lacklustre abuse of mobile detection libraries.
I have absolutely no idea how I'd go about doing no.2.
Any help appreciated
I've developed a mobile application with rhomobile + jQuery Mobile.
When I deploy it on a mobile phone "for android", it is very slow.
Could you help me to find the reason?
You can deactivate transition in your Rhodes app very easily to give it a try.
In the layout.erb file inside the app folder of your Rhodes application, you can find:
// Uncomment these options in case of performance problem in pages transition
//$.mobile.defaultPageTransition = 'none';
//$.mobile.defaultDialogTransition = 'none';
//$.mobile.ajaxEnabled = false;
//$.mobile.pushStateEnabled = false;
//$.mobile.loadingMessageDelay = 50; // in ms
Just uncomment it and give it a try.
No matter what wrapper is used (Rhomobile/Phonegap) jQuery mobile will have extremely bad performances on android devices (mainly 2.X, but sam thing relates to 4+ versions).
On the devices that have this problem (mostly Android) there isn't anything you can do. It is a browser limitation. Android mobile browsers are notorious for poor transitions.
On iOS, you have to be aware of a couple of issues. First of all, Webviews are hampered by slower Javascript than Mobile Safari, because they lack the Just-in-time compile feature. It's not Rhodes-specific. The same Javascript will run slower in a Webview than it will in Mobile Safari itself, and there is no getting around it.
Secondly, iOS does not automatically use hardware acceleration for transitions. You can "hint" the browser to use hardware acceleration by using a null 3D transform, like translateZ(0). Search for more information on this. There is a bit of an art to picking the right elements to do this on, since it can be costly to apply this to a large number of elements, and it usually isn't necessary to apply it to the entire element heirarchy.
My best advice, though, is to not use transitions, because they aren't handled well yet on a wide variety of mobile devices. IMO, no transition is a vastly superior user experience anyway. Transitions are used mainly to distract the user from slow software, ironically introducing more delay in the process.
I recently finished the first iteration of a game concept I was working on for mobile phones or browsers. My plan was to use PhoneGap and write it in JavaScript/HTML and port it everywhere. Because I wanted to be light on graphics and support any number of resolutions and orientations, I built this use SVG. I have been testing in Chrome and figured that the same SVG support would be on Android...
Well after doing some Googling, I see that the android devs specifically left out SVG rendering from the browser... I assume this means that once I convert my app into PhoneGap format, it won't run on Android. Is there any way to bake-in SVG rendering with a PhoneGap plugin or something, or am I SOL?
I saw that Honeycomb has support for SVG, does anyone know if they plan on backporting this to 2.2, 2.3, etc? It seems to be a huge oversight that if you want to support multiple resolutions and screens you wouldn't incorporate a technology than can dynamically create graphics.
As you mentioned in your question, support for SVG was compiled into the Webkit browser for Android 3.0. I just tried the Android 3.1 emulator, and it is working there as well:
So it appears as though, for future releases, we can probably count on SVG support being included in the Webkit browser.
I am not aware of any work being done to bring SVG to the webkit browser on earlier versions of Android.
You might be able to use canvg which uses javascript to interpret SVG and draw it on the canvas. I expect performance will be too slow for a game, though (I've not tried it myself yet)
I have been trying to get the Fusion Charts to work on Android 2.2 (emulator). But its not loading anything . i can see only blank screen.
Has anyone run Fusion Charts on the Android device / emulator before? Can Fusion charts run on Android itself?
Edit:
I have try to load the chart in default browser of android. In that also its not loading. But its running in Opera and Mozilla Firefox. Any Idea?
Additional Information : Browser version is Webkit 3.1
FusionCharts Flash version loads fine on devices supporting Flash (Glaxy Tab, etc.)
For JavaScript version, the story is slightly different. I am copying a section of my notes here:
FusionCharts uses an enhanced version of HighCharts in order to render JavaScript based charts.
HighCharts uses 'SVG' as a technology to render the visualizations. Though considered part of HTML5, certain mobile platforms (like Android) does not support SVG as of yet.
As of now, Android supports "canvas" as a drawing technology for HTML5. Gingerbread is expected to fully support SVG.
If you refer to the history of HighCharts, you would see that HighCharts version 1.x supported canvas, but since 2.x they have shifted to SVG anticipating the inclusion of SVG support on major mobile platforms.
We, at FusionCharts, use HighCharts 2.x as a base to render FusionCharts. Consequently, they do not run on Android.
However, there is a workaround, if you replace the highcharts.js (2.x) supplied with FusionCharts by older highcharts.js, you would notice that it works fine on Android platforms. But that would mean limited functionality as a lot of enhancements done to HighCharts would be lost.
I hope I had been clear on my points. If you need further clarification, I can definitely provide you with more information. I can also assist you in implementing the older highcharts.js by particularly detecting Android based browsers and doing selective loading of older HighCharts JS files.
There is also a small extension of FusionCharts that gracefully handles this replacement of older HighCharts for devices that does not support SVG or VML but supports canvas.
You can see it in action at: http://www.fusioncharts.com/labs/peek/canvasmodulefallback/
Download the files from: http://www.fusioncharts.com/labs/peek/canvasmodulefallback/sample-canvasmodulefallback.zip
Zero when the data will be mobile devices crash.
var chartObj1 = new FusionCharts({
swfUrl:'Charts/Column2D.swf',
renderer: 'javascript',
renderAt: 'chartspan',
dataSource: {
"chart": {
"caption" : "Sales Summary",
"subcaption": "Summary of Sales"
},
"data": [
{"value":"0"},
{"value":"0"},
{"value":"0"},
{"value":"0"}
]
},
dataFormat: FusionChartsDataFormats.JSON
}).render();