CSS background-attachment バグの回避の方法 2019

background-attachment は背景画像を固定表示かスクロール表示させるCSS3プロパティですが、2019現在もバグが残っているので、背景画像を設置するとPCとスマートフォンで表示が変わってしまいます。これを回避するための一つの方法を紹介します。
これらの修正方法はすでにいくつかのサイトで紹介されていますが、情報が古かったり、間違えていたり、詳細が書かれていなかったりしたので、まとめの位置づけです。

通常の指定(スマホ未対応)

body{
  background:url('***.jpg');
  background-position:  center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size:cover;
  background-attachment: fixed;
}
background:url(‘***.jpg’);背景画像とURLを指定
background-position: center center;起点になる位置を指定
background-repeat: no-repeat;リピートするか指定
background-size: cover;サイズを指定
background-attachment: fixed;固定かスクロールを指定

こちらで指定すればPC上の表示は問題なく、またブラウザ等のシミュレーターでも問題なく表示されますが、いざAndroid8.0やiOS11でもFixedが効かずに表示が崩れてしまいます。

回避方法

body{
  position: relative;
  width:100%;
  z-index: 0;
}
body::before{
  content: '';
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height: 100vh;
  background:url('***.jpg');
  background-position:  center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size:cover;
}

bodyは背景をなしにします。別の個所やエレメントで指定されている場合は「body{background:none;}」を追記します。その上で疑似要素::beforeで疑似要素で作ったブロックに背景画像を表示させます。

content: ”;疑似要素には必須
display:block;ブロック要素にします
position:fixed;疑似要素自体を画面fixedにします
top:0;left:0;疑似要素の配置
z-index:-1;他の要素より1つ低い階層に配置します
width:100%;画面いっぱい。必須です
height: 100vh;%ではなくvhを使うことで,スマホの上部アドレスバーの表示非表示のカクつく挙動を回避します。

まとめ

スマートフォンの上部のアドレスバーの表示非表示が非情に厄介で不安定です。またvhという単位は最新ブラウザではほぼ対応していますが、一部未対応ですので、下記サイトで確認するようにして下さい。
 またCSS3のプロパティやHTMLなど、ほとんど対応してないのにそれを書かないで紹介するサイトが多く上位を占めています。必ずご自身でそれがどの程度対応しているか調べる癖をつけましょう。