質問: お世話になっております。 フッター領域の、fixedメニューについての質問です。 androidだと希望通りに固定されていますが、 iphoneだとスクロールしたときに、fixedフッターメニューが上下に動きます。 iphoneでも画面下部で固定されたままにしたいです。 【以下、HTML全文】 ``` test テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテストテストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテストテストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト テストテストテスト MAP TEL TOP ``` 【以下、CSS全文】 ``` *::before,*::after, * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-transition: .4s margin ease-out; -moz-transition: .4s margin ease-out; -ms-transition: .4s margin ease-out; -o-transition: .4s margin ease-out; transition: .4s margin ease-out; } body { margin:0; } .FixedF_M{ display: flex; visibility:hidden; width:100%; position: fixed; left: 0; bottom:0; text-align:center; background-color:black; justify-content: space-around; } .FixedF_M .fa-phone,.fa-arrow-up,.fa-map-marker-alt { font-size: 3em; color: white; padding: 10px; transform: scale(-1, 1); } .FixedF_M span { display: block; font-size: 14px; text-decoration: none; padding-bottom: 5px; } .FixedF_M a { text-decoration: none; font-weight: bold; color:white; } ``` よろしくお願いします。 ### 追記(画像) 本当に一瞬だけの症状なので、スクショとるのにけっこう苦戦しました・・・。 (スクショした頃には元の位置に戻ったりするので) わかりづらい画像ではありますが、伝わると幸いです。 ※下のバーはiphoneの仕様です。 そこが大体ではありますが、ディスプレイ最下部です。目安になるかと思います。 | 通常時 ![通常時](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/5c195c02c011f3dbbf8287bb916863eb.jpeg) | ズレ時 ![ズレ](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/ea2669c6f44bb2d03c0161c99043ae43.jpeg)
回答: iPhoneのiOSのバージョンが書かれていないので iOSのバージョンが古いか、またはmargin-bottomが原因のため padding-bottomに修正すると直る可能性があります。