WebKit transform 3d on Android is not working - android

I am trying to open the following webpage in Android 2.3.3 browser ...
http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html
but the animation is not working properly because android 2.3.3 is not supporting webkit transform 3d.
Any idea how to make it work ?
Regards,
Sandesh.

As you can see here you can use 3d css transforms only on honeycomb or later. For earlier versions there is nothing you can do other than doing a native app.

Try if the following polyfills work,
they are especially for Internet Explorer, though.
https://github.com/pbakaus/transformie
http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

Related

Is it possible to power an android webview with FireFox for android opensource code?

I created an android webview for my website all was going fine only for me to notice that filechooser was not opening in android versions less than 5.0... After struggling for days, and trying so many things like solutions to SO questions 28600165 and 23568792 many other bunch of stuff online... nothing worked out(I bet you all of them are a waste of time). I later found it's a bug in older android versions and there's no real workaround like in this github issue No workaround for filechooser bug for 4.4.1 and 4.4.2 ... But I am able to upload files on all android versions using FireFox for android even Chrome... How come the HTML input type file works with FireFox webviews despite the bug in these particular versions of android... Is it possible for me to power my webviews with FireFox code since it's opensource if yes how easy is that and how effective will it be.... I will also appreciate guidelines on how to go about this, with an example if possible . thanks in advance.

Cordova Webview -webkit-backface-visibility not working

I create a simple Android application using the latest version of Cordova and replace content of www folder by sample code of a memory game written by Igor Minar on Github (https://github.com/IgorMinar/Memory-Game). The problem is the cover image (front side) does not display. The cards always display the content image (back side) for both sides.
Then I create a new Android application without Cordova but use a simple android.webkit.WebView and everything work as expected with similar www content.
I think this is an issue of Cordova Webview. I want to use Cordova because it's a good SDK so I want to ask if someone can give me a solution for this webview issue.
Thanks in advance.
After a long experimentation using this website: http://thewebrocks.com/demos/3D-css-tester/
(source code on github)
and based on the code of #nguyen-canh-linh, which he manages to get working even in Android < 4.4 webview (see on his repository)
I found that you CAN NOT have two css properties animated in the same class - but I was aware of that fact (a bug I read about on the Internet) - I did not realize that the trick needed to avoid flickering in recent webkit version ie: * { transform: translate3d(0,0,0); } was indeed seen as an animation and triggers the bug
Note: also be careful with: backface-visibility: hidden; do not apply it to every element (*), it could be buggy as well.

Fixed footer with blank icons on Android 2.3

We're developing a hybrid app for Android and iOS and are using html+css to style the app. There is however one problem that we can't fix right now:
Since we want support for Android 2.3-4.2 and iOS 5.1-6.1 we try to use 'position:fixed' for the fixed header and footer. To be able to use the nice 'glow' on the tabs in the footer, we use webkit-mask-image and a gradiated background. This works well on iOS and Android 4+ but not on Android 2.3.
Also, if we remove all the 'fixed' elements on the page, the icons show up on 2.3.
It seems much similar to this question: http://www.sencha.com/forum/archive/index.php/t-192463.html?s=9b3768697b19cd9957d1c0ee2b7fe6da but we do use a z-index for the div's and this problem tagets Android 4.0.3 and did work on Android 2.3. Sencha however doesn't seem to use 'position:fixed' for header and footer.
Anyone have a suggestion on how to tackle this problem?
I had the same problem with SVG icons, and I found that Android <2.3 does not support SVG (using the default browser).
This article describes a solution (i.e. workaround) using canvg.js to render the SVG with a canvas.

toDataURL not working on android browsers

I have an image that the user drew on a canvas and i want to save that image on the server.
These lines work well on my ipad but not on my android(ver 2.3.3) browser:
var testCanvas = document.getElementById("sketchpad");
var canvasData = testCanvas.toDataURL("image/png");
If i alert canvasData i only get:
data:,
Am I missing something? Is it possible to do on android or should i be looking at other methods, plugins, etc?
Unfortunately it isn't supported in your version (i think it's only supported in ICS), have a look at this issue reported
http://code.google.com/p/android/issues/detail?id=16829
There is supposed to be some sort of JavaScript implementation to add support for it, but i haven't tried it myself
http://code.google.com/p/todataurl-png-js/
Unfortunately toDataURL() only work on android 3.2 or above version.
An alternative implementation that we have used successfully on multiple Android handsets without modification is described in this blog post:
http://jimdoescode.blogspot.co.uk/2011/11/trials-and-tribulations-with-html5.html
This uses the toDataURL method if it works correctly, and if not uses a javascript jpg encoding library to produce the image.

Live folders on Android 3.x+

I have an older 2.x Android app that I am finally getting around to testing out on 3.x, and noticed that I can't seem to create a Live Folder for the application on a 3.1 tablet. Is it possible to create live folders for apps on 3.x+ devices, or are they no longer supported?
They are no longer supported. Instead you can create a widget with a ListView inside.
this app brings back livefolders to honeycomb and above
http://play.google.com/store/apps/details?id=arnodenhond.livefoldershortcut
http://code.google.com/p/livefolder-shortcut/
i used this source code for my project. i think it will also used full for you. http://androidostutor.net/android-live-folder-example/

Categories

Resources