1

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?

enter image description here

Community
  • 1
  • 1
VIDNA
  • 91
  • 7

1 Answers1

0

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.

tyrion
  • 1,984
  • 1
  • 19
  • 25