firefoxでposition:fixedが聞かない

スマートフォンサイトやアプリによくある
画面上部のアイコンをクリックすると
メニューブロックが表示され、✕じるしがクリックされるとメニューが閉じるように作成したいと考えています。

下記の通りにコーディングすると

●ページを開いた時
PC(chrome):ヘッダ固定
PC(firefox):ヘッダ固定
Android(chrome):ヘッダ固定
Android(firefox):ヘッダ固定
iPhone(Safari):ヘッダ固定

●メニューを開き、その後閉じた時
PC(chrome):ヘッダ固定
PC(firefox):ヘッダスクロールする
Android(chrome):ヘッダ固定
Android(firefox):ヘッダスクロールする
iPhone(Safari):ヘッダ固定

となってしまいます。
position:fixed
で、firefoxだけにあるバグ(又はfirefox以外にだけあるバグ)
とかって、何かありましたでしょうか？

[HTML]

<div id="container">
  <header>
    <input type="button" id="icon_menu_open">abcde
  </header>
</div>

[CSS]

header{
    position:fixed;
    top:0;
    z-index:100000;
}

[JavaScript]

$(function(){
    $('img#icon_menu_open')
    .on("click", function(event){
        $("section#icon_menu").css("display","block");

        //コンテンツをその分右へ＆グレースケールのフィルター
        $("#container").css("position","absolute");
        $("#container").css("left","100px");
        $("#container").css("width",(container_width - icon_menu_width));
        $("header").css("width",container_width);
        
        //親要素への伝播をキャンセル
        event.stopPropagation();
    })
});

//×印がクリックされた時に動作する関数(アイコンメニュー非表示)
function icon_menu_display_none(){
    //アイコンメニューエリアを非表示
    $("section#icon_menu").css("display","none");
    $("#container").css("position","");
    $("#container").css("width","100%");
    $("header").css("width","auto");

    //検索エリア固定化
    $('header').css("width",$('main').css("width"));
    $('main').css("margin-top",$('header').css("height"));
}