[√] 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)ではちゃんと隠れる.
[√] 「操作できる/できない」問題
- 操作できない方のブラウザのスクロールバーを操作しようとすると,カーソルが,工の形になる(文字列として扱われている?)
- 要素が被っていることが問題かと思い,被っている要素をheight:0;するも効果なし(元々pointer-events:none;してる要素だし,そうなりますよね)
- z-indexで他の要素の前後関係は操作済み.
- Chrome(PC),Firefox(SP)ではスクロールできない.
- Chrome(SP),Firefox(PC)ではスクロール可能.
(Windows / Chrome)
(キャプチャ動画はこちら)
|
| 現物はこちらになります
| (ソースコードが長いため,ここには掲載しきれません)
| lanworks.webcrow.jp
|
他のOS,ブラウザでも問題が発生していましたら,ご連絡ください.質問文にて反映します.
また,サイトについての個人的なコメントも受け付けています.(こちら)
とてもバグ感のある案件ですが,ご協力していただけるとありがたいです.
補足 - 状況確認方法
- PCで動作確認する際は,ブラウザ幅を変えて検証してください.
- 横幅のブレークポイントは1rem:17pxで,100vw -> 60rem -> 35rem,です.
- 「見える/見えない」問題は,PCでの確認ができないため,検証にスマホ実機が必要です.
- 「操作できる/できない」問題は,幅1020px以下で右側のメニュー,幅595px以下で左側のハンバーガーメニュー「info」から,AboutもしくはCopyrightをクリックすると確認できます.