background-attachmentを使ったパララックス

background-attachmentをfixedにすると簡単にパララックス（視差効果）を使ったスクロールが実装出来ます。
ただ、iOSはどういった理由か、この「background-attachment:fixed;」を頑なに対応させない為（ベンダープレフィックスを付けてもダメ）、iOSでは別の対応が必要になります。
今回はiOSではパララックス（視差効果）を使わずにシンプルに背景画像がスクロールしていく形で対応させます。

See the Pen
background-attachment:fixedでパララックス by yachin29 (@yachin29)
on CodePen.

各ブラウザの対応

backgroundのショートハンド

background関連の指定は多いのでbackground-attachmentも含めてショートハンドでまとめてしまいましょう。

background:　＃FFF url() no-repeat center center/cover fixed;/* 背景色、背景画像、背景の位置、背景のサイズ、背景のスクロールの有無 */

iOSの対応

iOSのSafariでは「background-attachment」は未対応のため、そのままでは表示が崩れてしまうので対応が必要です。ここでは「background-attachment:fixed」の値を「background-attachment:scroll」に変更するという非常にシンプルな方法で対応します。さらに高さを50vhほどに抑えておきます。

@media (max-width: 959px) {

.bg-1{
height: 50vh;
background: url() no-repeat center center/cover scroll;
}

}

今後のiOS

今後、iOSで「background-attachment」が対応されるのかは、解らないですが、AppleのDeveloper Forumsで「background-attachment」については以下のコメントで締められています。

Apple decided fixed background is not the vibe. That's all. Apple is god remember it

developer.apple.com