質問: スマートフォンサイトやアプリによくある 画面上部のアイコンをクリックすると メニューブロックが表示され、✕じるしがクリックされるとメニューが閉じるように作成したいと考えています。 下記の通りにコーディングすると ●ページを開いた時 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] ``` abcde ``` [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")); } ```
回答: 先祖要素にfilterを設定していたのが原因だったようです