Text is not displayed on buttons in HTML5 app for Android 4

Question

Our team was developing HTML5 app for iPhone and Android We used css framework Gumby We experienced strange issue which was reproduced only on Android 4.0.3 and 4.0.4

This HTML code didn't display text 'Settings' inside of the button

<div class="large btn secondary">
    <a href="#/settings">Settings</a>
</div>

Answer 1

This is very strange behavior of WebView on Android 4.0.3 and 4.0.4, when text on some buttons are missing.

We found this problem on Aser and LG phones in our company, but Nexus4, Samsung SGS+ and iPhone shows everything correctly.

Step 1

jade-html code for this project

.mainscreen
  .btn Button 1
  .btn Button 2
  .btn Button 3
.footer
  .bottomMenu
    .btn SomeButton 1
    .btn SomeButton 2
    .btn SomeButton 3

basic ccs code for this project

.btn a {
  position: relative; // it's necessary for icons
}
.bottomMenu {
  position: fixed; z-index: 100; // it's necessary for layout
  bottom: 0;
}

On step 1 we have described problem: hidden fonts/text on buttons in .mainscreen and everything fine with buttons in .bottomMenu

Step 2

When we add z-index:101 to .mainscreen .btn a — magic! All text is back!

But now .mainscreen .btn a render over fixed in bottom of screen .bottomMenu

Step 3

Just add to .footer css position:relative; z-index:102;

Whoo-ha! All text is showing and all z-indexes order is fine!

Final worked css is

.btn a {
  position: relative; z-index:101;
}
.footer {
  position:relative; z-index:102;
}
.bottomMenu {
  position: fixed; z-index: 100;
  bottom: 0;
}