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.
Related
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.
I tried this link however it does not seem to work within android/eclipse sdk 4.0+
My advice is to try to work with Android Studio, has a very good graphic designer.
I am using Font Awesome, which was designed for use with Twitter Bootsrap.
The Android (version 2.1) browser on the Galaxy S (Model # GT-I9000M) phone does not display the icons. It shows them as vertical rectangles, similar to what you see here:
Does anybody know a fix to this problem?
Here is the across the board support for #font-face: http://caniuse.com/fontface
2.1 browser simply doesn't support it, and it's not properly supported until 4.0. 2.2-3 partial support refers to the use of local(), which isn't supported at all. Font will not work at all on the stock Android browser if you are trying to source local fonts or using it to force user to download yours (smiley face hack).
Edit: How to know if a font (#font-face) has already been loaded? You can use this jQuery plugin to detect if Font-Awesome has loaded. If it hasn't (either due to bad font file or due to lack of support by the phone) then you can add a class which adds a background image (of the icon) to the div/span/whatever (can't be the <i> tag) that the icon has been applied to.
You can see a demo here.
I'm using Mono for Android 4.2.4 with VS 2010. The layout designer does not refresh properly if you change the theme, API version, orientation or device name from the designer toolbar. MonoDevelop works fine.
Is there a resolution for this?
I have not seen one. There are other issues as well, if you modify a xaml file and change widows without saving it, your changes will disappear! While Monodroid is an awesome tool, there are still a few bugs
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/