色んなパターンがあると思いますので、とりあえず私が今回遭遇したパターンについて。
position: fixed;で表示画面に固定させているはずの要素が他の要素の下に潜り込むように消えてしまう現象がiOSでのみ発生して困り果てていました。今回の場合はハンバーガーメニューと、リンクでした。
先に答えを言ってしまうと、position: fixed;を指定している要素の親要素にoverflow: hidden;がかかっていると、その親要素の移動に合わせて表示が消えるというもので、考えてみればiOSの挙動のほうが正しい気がします（まだ勉強始めたばかり）。なぜかwindowsやandroidだと表示が残るんですよね。
囲った部分になります。これらが下にスクロールすると、下にある要素の下側に潜り込むような挙動を取っていました。最初はz-indexの指定が外れて下に潜り込んでいるのかなと思い、z-indexを弄り倒して表示がぐちゃぐちゃになってしまい、バックアップを取っていなかったら死んでいましたね。
今にして思えばなぜoverflow: hidden;を入れていたのかもよく分からず、外しても何も問題は起きませんでした。まあ、position: fixed;で浮かせている要素なので、overflow: hidden;が必要な場合でもhtmlの他の場所に記述すれば問題ないかと思います。
これに三日もかけたとか、初心者とは言え、アホだなあと反省することしきりですが、これでこの挙動は覚えました。iOSでの挙動を見る方法が今のところサーバにアップロードして手元のiPhoneで確認するしかなく、Macの導入を考えさせられる出来事でした。
しかしこうして見るとトップ画像もどうにかせんといかんな。
１ページのみのサイトなんて余裕と思っていた過去の自分をぶん殴りたい。
そんな顛末でございました。
って、アマゾンでマックの値段見たらたっけぇぇぇぇ。
コメント