iphoneだとfixedフッターが固定されない

お世話になっております。
フッター領域の、fixedメニューについての質問です。

androidだと希望通りに固定されていますが、
iphoneだとスクロールしたときに、fixedフッターメニューが上下に動きます。

iphoneでも画面下部で固定されたままにしたいです。

【以下、HTML全文】

<html Lang="ja">
<head>
	<meta charset="utf-8">
	<title>test</title>
	<meta name="viewport" content="width=device-width">
	
	<!--************ noindex ************-->
	<meta name=”robots” content=”noindex” />
	<!--*********************************-->

	<link rel="stylesheet" href="style.css">
	<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>


<body>
	
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p><p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p><p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>


	<div class="FixedF_M">
		<a href="https://"><i class="fas fa-map-marker-alt"></i><span>MAP</span></a>
		<a href = "tel:080"><i class="fas fa-phone"></i><span>TEL</span></a>
		<a href="#" id="BackTopBtn"><i class="fas fa-arrow-up"></i><span>TOP</span></a>
	</div>   


		<script>
			$(function() {
				 if ((navigator.userAgent.indexOf('iPhone') > 0
				 	&& navigator.userAgent.indexOf('iPad') == -1)
				 	|| navigator.userAgent.indexOf('iPod') > 0
				 	|| navigator.userAgent.indexOf('Android') > 0) {
				 		var bH = $('.FixedF_M').height();
						$('body').css('padding-bottom',bH+'px');
						$('.FixedF_M').css('visibility','visible');
					}else{
						$('.FixedF_M').css('display','none');
					}
			});
		</script>

</body>
</html>

【以下、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の仕様です。
そこが大体ではありますが、ディスプレイ最下部です。目安になるかと思います。

｜　通常時

｜　ズレ時

miyabi_pudding

2019/05/14 04:37

動く前と、動いた後のキャプチャをください。 iPhone SafariのUI上、防ぐのが不可能な場合があるように思えます。

LanHma

2019/05/14 06:00

実際にコードで試してみたのですが、問題なく下についているように感じます。もし、safariのUIのことを言っているのであれば、難しいと思います。

Miii

2019/05/14 06:26

＞miyabi_takatsukさんコメントありがとうございます。症状が出てるのは、知人のiphoneなのですが、頼んでみます。＞LanHmaさんコメントありがとうございます！そうなのですね！UIというのは仕様上ということでしょうか＞＜自分もPCではありますが、safariブラウザですと、問題なく表示されていたり、開発者ツールでもiphoneが問題なく表示されていますので、悩ましいところです・・・

miyabi_pudding

2019/05/14 06:33

開発ツールだと、完全に実機と同じ動きとはなりませんからね・・・。 Macをお使いなのであれば、Xcodeをインストールしたら自動で入る、 Simulatorアプリケーションを使い、検証すると、実機とほぼ同じ動きが再現可能です。実機をお持ちでないなら、そのように検証するといいでしょう。 UI上できないかもとも、それでご理解いただけるかと思います。

Miii

2019/05/14 06:55

>miyabi_takatsukさんそうなのですね！詳しく教えていただきありがとうございます！ Xcodeというのは耳にしたことはありますが、知識不足なので、調べて検証のために導入してみます＾＾ありがとうございます！とても助かります＾＾

miyabi_pudding

2019/05/14 07:10 編集

追記、大変にありがとうございます。しかしこれは・・・、本当にキャプチャしたそのままの画像でしょうか？通常、キャプチャをした場合は、上のアドレスバーや、下のツールバーも映るはずですが。その部分も含めて、検証が必要なので、どうかご確認お願いします。そして、このバー付きUIならば、iPhone X系ですね。しかし、もし、これがキャプチャの全てならば、お使いのブラウザが、iPhone Safariでない可能性があります。質問本文に、iPhone Xや、iPhone Xsであること、使用してるブラウザも記載をお願いします。

Miii

2019/05/14 08:05

おっしゃる通り、全画像ではありません。どうやら、アドレスは下スクロールにより、消えていたようです。 LINEでアドレスを送って、そのアドレスを開いてもらっていました。まさかと思い、アドレスをコピペして、 safariのブラウザで開くと確かに、safariとは異なるようでした。そして、safariだと正常に動きました！！その開いてもらっていたブラウザは下にスクロールする前には、アドレスが表示されています。あとは、時計と電池残量などがスクショにうつっていました。すみませんが、アドレスについては、諸事情により控えています。使用しているブラウザについては、アプリ一覧をみさせてもらったのですが、 safari以外には、該当のブラウザアプリらしきものを発見できませんでした。 iphone XRとのことです。

Miii

2019/05/14 08:15

ちなみに、上部は画像カットしましたが、下部はカットしていません。（スクロールバーは表示されていませんでした）

miyabi_pudding

2019/05/14 08:20

下部はカットしてないのであれば、上部のアドレスバーの仕様上の高さ変動も原因の可能性があります。 iPhone XRか・・・。しかし、ほぼほぼiPhone Xと同じ仕様なので、仕様につき、回避不可の可能性が非常に高いですね。仮にsafari以外であっても、safariで正常に動いているのであれば、対応する必要はないかと思います。（他のブラウザだったとしても、そのブラウザの仕様上回避不可になるかと思われる）これ以上の正確な回答を得るには、キャプチャの表示をしているブラウザを完全に特定する必要があります。

Miii

2019/05/14 08:36

なるほどですね！ safariにてツールバーでも変動していますし、アドレスバーの使用上の高さ変動も原因の可能性が高いですね！確かに、ブラウザの特定が先決ですね。 safariで正常に動作したので、対応が必要ないような気もしますが、 LINEで飛んだ場合は、そのブラウザになる可能性もあるので悩ましいところではありますね・・・

Miii

2019/05/14 09:03 編集

ブラウザについてですが、どうやら、LINEアプリのブラウザ機能らしいですね。 LINEは普及していますので、悩ましいところです・・・。

miyabi_pudding

2019/05/14 09:11

回答の方でコメント返しますね。（ここの使用の仕方から逸脱してきました）

行動規範の内容に同意します

回答3件

ユニーバーサルセレクタ(*)でtransitionを
すべてに適用させているのが良くないようなので
必要なタグだけに適用するように修正が必要です。

投稿2019/05/08 14:27

yasutomi

総合スコア2941

Miii

2019/05/12 14:48

お返事ありがとうございます＾＾いっそのこと、transitionを消してみたのですが、ダメでした・・・

yasutomi

2019/05/12 14:53

なるほど… 残念ながら私はここでギブアップです。

Miii

2019/05/12 14:57

貴重な時間の中、ご回答いただきありがとうございます＞＜

行動規範の内容に同意します

ベストアンサー

質問の修正を受け、ある程度の状況が見えてきましたので、回答させていただきます。
可能性は二点です。

・.FixedF_Mに高さを具体的に指定し、overflow: hiddenさせる。

css
1.FixedF_M{
2    height: 20vw; /* 数値は暫定 */
3    overflow: hidden; /* はみ出しは非表示にする */
4
5    display: flex;
6    visibility:hidden;
7    width:100%;
8    position: fixed;
9      left: 0;
10      bottom:0;
11     text-align:center;
12    background-color:black;
13    justify-content: space-around;
14}

高さを指定していないため、子要素の浮動ボックスモデルが、親からはみ出し、その分が下にでてきている可能性があるため、
まずは、親要素（.FixedF_M）に厳密に高さを指定してください。
これで解決するかもしれません。

・iPhoneのUI（特に下部のツールバー）が原因で、動いてしまう。
これは、スクロールのたびに、ツールバーの高さが変動するためで、
これはiPhone Safari特有の仕様であり、これは開発者側ではコントロールは不可能になります。
また、Safariでなくても、iPhone Google Chromeでも同様の仕様となるため、
ツールバーが原因での上下に動く現象は回避不可能です。
（ただし、JavaScriptで無理やり移動させて動いてない様に見せるのはできるっちゃできる）

投稿2019/05/14 07:28

miyabi_pudding

総合スコア9555

Miii

2019/05/14 08:11

詳しく教えていただきありがとうございます！また、おっしゃるとおり、ブラウザが異なるようです。一体なんのブラウザなのやら・・・ただ、safariだとうまく固定されました！おっしゃるとおり、 safariだとツールバーの関係で上下に動いてしまうみたいですね！ただ、これは仕様上なので気にならないかもです＾＾ありがとうございます！

miyabi_pudding

2019/05/14 09:13

LINEのWebViewということですね。それであれば、これ以上は対応不要かと思います。仕様ということで一蹴できるのであれば、しましょう。また、担当営業さんがいるのであれば、仕様上仕方ない旨を説明し、対応しない方針で相談されてみてはいかがでしょうか。なぜなら、普及しているとはいえ、メインのブラウザではなく、あくまでLINE上でURL叩いた時に使用されるものであって、対応優先度はかなり低いものであると思うからです。なので、あとこの先は、質問者さん次第となります。（対応するかしないかの相談も含め）

Miii

2019/05/14 09:40

確かに、メインブラウザでもないので対応不要かなと思いますね。先ほど少し調べていたら、ブラウザ判別で、リダイレクトによりブラウザ変遷をする方法もあるので、それが希望通りの動きだったら導入してみようと思います。当初の質問とはかなりはずれているにも関わらず、ご丁寧にありがとうございます！ safariでは希望通りの動きになりましたので、こちらの質問は解決済みにしようと思います＾＾ありがとうございます！

行動規範の内容に同意します

iPhoneのiOSのバージョンが書かれていないので
iOSのバージョンが古いか、またはmargin-bottomが原因のため
padding-bottomに修正すると直る可能性があります。

投稿2019/05/06 08:36

yasutomi

総合スコア2941

Miii

2019/05/07 10:10

回答ありがとうございます！知人のiphoneのため正確なことはわかりませんが、 iphone XRと言っていたはずなので、比較的、新しいかと思います。 padding-bottomに変更してみようと思います！ありがとうございます＾＾

Miii

2019/05/08 13:06

$('body').css('margin-bottom',bH+'px'); の部分をmargin-bottomから、 padding-bottomに変更してみましたが、スクロールをすると固定されませんでした。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

iphoneだとfixedフッターが固定されない

追記（画像）

関連した質問