質問: ### [√] PCとスマホで違いが発生する **[√] 発生している問題(概観)** * ブラウザによって操作できない要素がある. * ブラウザによって前面に表示されてしまう要素がある. --- **[√] 確認環境** * Windows10 (64 bit) : Chrome 58.0.3029.110 (64-bit), Firefox 54.0 (32 bit) * (無料アップデート期間中,Windows8 -> Windows10へ) * Android 4.4.4 (Kitkat) : Chrome 58.0.3029.83 , Firefox 54.0 --- 以下詳細 --- **[√] 「見える/見えない」問題** * PCではちゃんと他の要素で隠れるのに,Chrome(SP)だと何故か前面に表示される. * 当該要素の親にはbackground-visibility:hidden;を記述済み. * **Chrome(SP)**では表示**されてしまう**.(隠したい) * Firefox(SP),Chrome(PC)・Firefox(PC)ではちゃんと隠れる. (Android / Chrome, Firefox) ![見える/見えない](https://teratail.storage.googleapis.com/uploads/contributed_images/38b635857e0c0252c0c6a31d0c70cdfc.png) --- **[√] 「操作できる/できない」問題** * 操作できない方のブラウザのスクロールバーを操作しようとすると,カーソルが,**工**の形になる(文字列として扱われている?) * 要素が被っていることが問題かと思い,被っている要素をheight:0;するも効果なし(元々pointer-events:none;してる要素だし,そうなりますよね) * z-indexで他の要素の前後関係は操作済み. * Chrome(PC),Firefox(SP)ではスクロール**できない**. * Chrome(SP),Firefox(PC)ではスクロール可能. (Windows / Chrome) ![操作できる/できない](https://teratail.storage.googleapis.com/uploads/contributed_images/f634c64a5b6dde776202cd23f274b355.png) (キャプチャ動画はこちら) --- | | **現物はこちらになります** | **(ソースコードが長いため,ここには掲載しきれません)** | **lanworks.webcrow.jp** | --- 他のOS,ブラウザでも問題が発生していましたら,ご連絡ください.質問文にて反映します. また,サイトについての個人的なコメントも受け付けています.(こちら) とてもバグ感のある案件ですが,ご協力していただけるとありがたいです. --- **補足 - 状況確認方法** * PCで動作確認する際は,ブラウザ幅を変えて検証してください. * 横幅のブレークポイントは1rem:17pxで,100vw -> 60rem -> 35rem,です. * 「見える/見えない」問題は,PCでの確認ができないため,検証にスマホ実機が必要です. * 「操作できる/できない」問題は,幅1020px以下で右側のメニュー,幅595px以下で左側のハンバーガーメニュー「info」から,AboutもしくはCopyrightをクリックすると確認できます.
回答: コードは雑多&丸投げすぎて追っていませんが、 * IE: × (info, blog, works の表示が乱れる) * Edge: × (ウィンドウが狭いときにUIが衝突する) * Chrome for Mac: × (ウィンドウが狭いときにUIが衝突する) * Chrome for iPhone: × (背景画像以外何も表示されない) * Chrome for Android: × (質問にあるように斜めったCopyrightが見えてしまう) * Safari for Mac: × (背景画像以外何も表示されない) * Safari for iPhone: × (背景画像以外何も表示されない) * Chrome スマホシミュレーション: × (質問にあるように斜めったCopyrightが見えてしまう) とまともに表示できたと思われるプラットフォームはありませんでした。 ユーザインタフェースも正直煩わしくてわかりにくく、もう少し意匠・コードともに堅実に設計されたほうがよいと感じます。 またいくらお手上げ状態でも「ソース全部渡すので解析しろ」という投稿はいささか乱暴だと思います。実際のデバッグでもそうですが、問題を切り分けて、事象が発生するコードだけ抽出・抽象化することが大事です。 #z-index をもう少しきめ細やかに設計・設定したほうが幸せになる気がしマ