css - Android 4 の HTML5 アプリのボタンにテキストが表示されない

Question

私たちのチームは、iPhone と Android 用の HTML5 アプリを開発していました css フレームワークの Gumby を使用しました Android 4.0.3 と 4.0.4 でのみ再現される奇妙な問題が発生しました

この HTML コードは、ボタン内に「設定」というテキストを表示しませんでした

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

Answer 1

Android 4.0.3 および 4.0.4 で一部のボタンのテキストが欠落している場合、これは WebView の非常に奇妙な動作です。

この問題は、社内の Aser と LG の携帯電話で発見されましたが、Nexus4、Samsung SGS+、および iPhone ではすべてが正しく表示されます。

ステップ1

このプロジェクトの jade-html コード

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

このプロジェクトの基本的なccs コード

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

ステップ 1 で問題を説明.mainscreenしました。.bottomMenu

ステップ2

追加z-index:101すると.mainscreen .btn a—魔法！すべてのテキストが戻ってきました！

ただし.mainscreen .btn a、画面の下部に固定されてレンダリングされるようになりました.bottomMenu

ステップ 3

.footercssに追加するだけposition:relative; z-index:102;

うわー！すべてのテキストが表示され、すべての z-index の順序は問題ありません!

最終的な作業CSSは

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