android - javascript .Toggle を使用すると、CSS が div を左に移動します (スクリーンショットを含む)

Question

モバイル デバイスを対象とするサイトのメニューを作成していますが、デフォルトの Android ブラウザの動作が非常におかしいです。私はすべてを最小限に抑え、すべてをテストするためにできる限り基本的なものにしました。

jquery の .Toggle 関数を使用して、メニューを表示および非表示にしています。それは完全に機能します。すべてのブラウザで意図したとおりです。モバイル デバイスでテストしたところ、Firefox で動作し、完璧に見えました。次に、デフォルトの Android ブラウザでテストしました。残念なことに、問題がありました。

メニューを切り替えて表示する div をクリックすると、div が左に移動し、メニューの右側にギャップが残ります。面白いのは、100% の幅を保持し、画面の右端まで拡張するメニュー コンテナー内に div があることです。メニュー div 内の div の css には、実質的にまったく同じ css があります。だから、なぜそれが100％の幅を保持しているのに、切り替えたときに表示される私のdivを保持していないのか、私はとても混乱しています。誰にもアイデアはありますか？以下は、問題と私のコードのスクリーンショットです。

html

    <div id="mobilemenu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Random</a></li>
        <li><a href="#">Submit</a></li>
    </ul>

    <div id="mobilemenu-catdrop">
        Categories
    </div>
</div>

<script>
    var flip = 0;
    $("#click").click(function () {
    $("#mobilemenu").toggle( flip++ % 2 == 0 );
    });
</script>

CSS

    /* header */
header {
    background: #2e97de;
    width: 100%;
    height: 45px;
    border-bottom: #287eb9 1px solid;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    display: block;
}

/* mobile menu */
#mobilemenu {
    border-top: #8dc8f2 1px solid;
    width: 100%;
    background: #2e97de;
    display: none;
}

#mobilemenu ul {

}

#mobilemenu li {
    display: block;
}

#mobilemenu li a {
    padding: 10px;
    color: #95d3ff;
    display: block;
    text-decoration: none;
}

#mobilemenu-catdrop {
    width: 100%;
    background: #1e6291;
    color: #FFF;
    padding: 10px;
    display: block;
}