全記事ウェブノコエWEBサイト制作パララックスを「position:fiexd」で実装したときにハマったバグ2018年03月08日パララックスを「position:fiexd」で実装したときにハマったバグトップの背景画像を「position:fiexd」で固定しておいて、下から次のコンテンツ画面が覆いかぶさる感じのパララックスサイトを作っていたときにハマったこと。footerに1pxの余白ができる。footerの下に高さ1pxの余白ができてしまい、トップで固定した背景画像が1px分映りこんでしまう。いつもなら「これぐらいしょうがないか・・・」と諦めてしまう程度だが、今回は背景画像をアニメーションで動かしているので、どうしても目立ってしまう。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』の項目で解消します。iOSのオーバースクロールで固定した背景画像が丸見えiOSを搭載したApple製品(iPad、iPhone、Mac)でWEBサイトを閲覧する際、ページの一番下までスクロールすると、一瞬「ビヨーン」とコンテンツの表示領域外まで表示される。※この効果の呼び方は「オーバースクロール」「バウンド」「バウンス」など色々あるみたいです。この領域外まではみ出した瞬間、トップで固定した背景画像が一部だけ丸見えになってしまいました。まーそうなりますよね。コンテンツ部分にbackgroundで色付けして隠してはいるけれど、本当は『position:fiexd』で指定した画面の位置に常に背景画像が表示されている状態なわけですから。解決策として、『position:fiexd』の使用をやめることに。単純に『z-index』で背景画像のレイヤーを一番下に下げて、それ以降のコンテンツや固定ヘッダーのレイヤーを上げればいい。レスポンシブでコーディングしてあれば、背景画像のサイズ可変も気にする必要もありませんし。今までなんとなく「背景画像を固定するときは、fiexdを使う』と思い込んでいましたが、別に使わなくても良かった。ちなみに、「びよーん」させない為のCSSタグもあるみたいです。none使ってみましたが、うまく動きませんでした。新しいプロパティなので、ブラウザが対応しきれていないかな。「WEBサイト制作」カテゴリの記事を見るコメントを書き込むコメントをキャンセルメールアドレスは公開されませんのでご安心ください。付いている欄は必須項目となります。コメント内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。