【IOS】position: fixed;で固定したものがスクロールで隠れてしまう

現在position: fixed;でヘッダーとフッターを固定しています。
しかしiosで最下部・最上部までスクロールすると白いエリアに隠れてしまいます。
調べたところiosでの問題だと分かりました。

http://qiita.com/hokuto/items/cdcfc12dcecc09387467

こちらの参考サイトのように指定してみましたが上手くいきません。
IOSの修正を待つしかないでしょうか。

他に解決策、または上記参考サイトの指定でうまくいく補足などありましたら是非お願い致します。。。

iss

2017/03/22 08:29

参考URLの対策は、動的にpositionを変更した場合（Javascript等で）の対策なので、はじめからfixedで固定しているならば、関係ないかもしれません。「白いエリアに隠れてしまう」の辺りの挙動が分かりづらいのですが、「白いエリアとは何か」とか「ヘッダもフッタも隠れる」のか「どちらか」なのか「一部隠れる」のか「全て見えなくなる」のかなど、具体的な状況が知りたいですね。

T_sa

2017/03/22 08:34

再現できるHTMLやCSSなど提示していただけますか？

arue

2017/03/23 04:26 編集

7ueさん　画面を超えてスクロール(画面全体を引っ張るようなイメージ)した際に上に白いエリアが重なって全て隠れてしまいます。空のbodyにフッターを作成しfixedを指定を試してみましたが同じ現象は見られなかったので、導入されているシステム等が関係あるのかもしれません。何かバッディングするようなものがあるのでしょうか。あいまいな説明で申し訳ありません。。

arue

2017/03/23 04:27

T_sa 現在こちらの現象がみられるソースは開示できません。申し訳ありません。

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

回答1件

最上部、最下部ではpositionをfixedではなくabsoluteにしてみてはいかがでしょうか。
その場合top、leftなどの値は変える必要がないと思うのでpositionのみの変更だけで大丈夫なはずです。

参考リンク
https://syncer.jp/javascript-reverse-reference/get-scroll-position

ちなみに
上のサイトのコードでいうとこの部分が必要です。

javascript
1window.addEventListener( "scroll", function() {
2	// スクロール量を取得
3	var x = window.pageXOffset ;	// X方向 (横)
4	var y = window.pageYOffset ;	// Y方向 (縦)
5} ) ;