パララックスを「position:fiexd」で実装したときにハマったバグ

トップの背景画像を「position:fiexd」で固定しておいて、下から次のコンテンツ画面が覆いかぶさる感じのパララックスサイトを作っていたときにハマったこと。

【バグ1】 footerに1pxの余白ができる。

footerの下に高さ1pxの余白ができてしまい、トップで固定した背景画像が1px分映りこんでしまう。

いつもなら「これぐらいしょうがないか・・・」と諦めてしまう程度だが、今回は背景画像をアニメーションで動かしているので、どうしても目立ってしまう。

しかも、いつものごとくEdgeとIEだけかと思いきや、MacBook（msc OS Hight Sierra 10.13.2）でも発生している。

EdgeとIE側の原因は、全く関係ないエリア（positionも指定してない）の

list-style-type:none;
width:100%;

でした。

『list-style-type:none』でリストマークを消して、なおかつ『width:100%』の指定があると、1pxのスペースができてしまいます。

『list-style-type:none』は外せないので、『width:100%』を使わない方法で回避しました。

Mac側の1pxのスペースは、『バグ2』の項目で解消します。

【バグ2】 iOSのオーバースクロールで固定した背景画像が丸見え

iOSを搭載したApple製品（iPad、iPhone、Mac）でWEBサイトを閲覧する際、ページの一番下までスクロールすると、一瞬「ビヨーン」とコンテンツの表示領域外まで表示される。

※この効果の呼び方は「オーバースクロール」「バウンド」「バウンス」など色々あるみたいです。

この領域外まではみ出した瞬間、トップで固定した背景画像が一部だけ丸見えになってしまいました。

まーそうなりますよね。

コンテンツ部分にbackgroundで色付けして隠してはいるけれど、本当は『position:fiexd』で指定した画面の位置に常に背景画像が表示されている状態なわけですから。

解決策として、『position:fiexd』の使用をやめることに。

それじゃあ、「どうやってパララックスを表現するのか？」

単純に『z-index』で背景画像のレイヤーを一番下に下げて、それ以降のコンテンツや固定ヘッダーのレイヤーを上げればいい。

レスポンシブでコーディングしてあれば、背景画像のサイズ可変も気にする必要もありませんし。

今までなんとなく「背景画像を固定するときは、fiexdを使う』と思い込んでいましたが、別に使わなくても良かった。

ちなみに、「びよーん」させない為のCSSタグもあるみたいです。

overscroll-behavior: none

使ってみましたが、うまく動きませんでした。

まだ新しいプロパティなので、ブラウザが対応しきれていないかな。