android - チェックボックスを使用してナビゲーション (コンテンツ) を表示しても、Android では機能しません

Question

次の設定があります（狭いウィンドウで表示、幅が750px未満）：http://codepen.io/darrylhein/pen/oFalc

問題は、ナビゲーションの非表示/表示が Android の既定のブラウザーで機能しないことです。他の場所でもほとんど機能しているようです。(Android の Firefox では動作します。)

基本的にinput:checked ~ .class { height: 16em; }ナビを表示するために使用しています。

トランジションやその他のさまざまなものを削除しようとしましたが、うまくいかないようです。

何か案は？

JS の使用は避けたいのですが、必要があれば使用します。

score 0 · Accepted Answer

したがって、ソリューションへの2つの部分：

1) 問題は Android <4.1.2 で発生します。解決策は、本体に偽のアニメーションを追加することです。

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { 
    from { padding:0; }
    to { padding:0; }
}

2) ラベルがチェックボックスをチェックしない iOS <6 にも問題があります。解決策は、にを追加するonclickことlabelです。

<label for="checkbox" onclick>Menu</label>

1 に答える 1