background:fixedでの背景固定はiOS（iPhone）でうまく動かない

パララックスデザインなどで背景画像を固定するために
background-attachment:fixed; background-size: cover;
を同時に指定すると、iOS では fixed が効かずにスクロールされてしまいます。

background-attachment:fixed; ではなく、
position:fixed; で要素そのものを固定することで対応できます。

body::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: url("https://source.unsplash.com/y2azHvupCVo") center no-repeat;
  background-size: cover;
}

また、下記のようにアニメーションと background-attachment:fixed; を同時に指定しても、アニメーションが動作しません。
この場合も、擬似要素を作って position:fixed; で指定することで動作します。
CSSのスニペットに登録！背景にCSSグラデーションが変化するアニメーションを実装するスタイルシート | コリス

JavaScriptで高さを取得

ネイティブなJavascriptが用意している window.innerHeight; または window.outerHeight; を使って高さを取得します。

innerHeight	ブラウザの内周（コンテンツが表示されている部分）の高さ
outerHeight	ブラウザの外周（ブラウザ自体のツールバーやメニュー等）を含めた高さ

画面の高さ(height)について | 株式会社WEBインレット

HTMLの記述

<div id="cover"></div>

CSSの記述

#cover {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: url("https://source.unsplash.com/y2azHvupCVo") center no-repeat;
  background-size: cover;
}

JavaScriptの記述

/* ロード時に実行 */
window.addEventListener('load', () => {
  let wh = window.innerHeight;
  document.getElementById('cover').style.height = wh + 'px';
});

/* リサイズ時に実行 */
window.addEventListener('resize', () => {
  let wh = window.innerHeight;
  document.getElementById('cover').style.height = wh + 'px';
});

高さが取得できているか確認するときは、下記を追加します。

/* コンソールに高さを表示 */
console.log(wh + 'px');

モーダルの場合

背景ではなく、モーダルのように前面を覆う要素であれば、下記で解決できます。
iOSでfixed要素の背景がツールバーの高さ分消える件 | SKYGUILD

背景が最初に表示されていないデザインなら上記で問題ないのですが、背景が最初から表示されていると、メニューバーの高さ分背景が表示されず、スクロールした瞬間の表示が一瞬乱れてしまいます。
bodyに別の背景を指定するなどの対応が必要です。