2022年4月12日追記
iOS のバージョンを最新版の 15.4.1 にアップデートしたところ iPad （第9世代）以外は取得できました。
iPad （第9世代）は古いから取得できないんでしょうかね…
CSS変数の定義はメディアクエリ内で行わないほうがよさそうです。

取得できた
- iPhone XR 15.4.1
  - Safari
- iPhone X 15.4.1
  - Safari
- iPad Pro （9.7インチ） 15.4.1
  - Safari
取得できない
- iPad （第9世代） 15.3.1
  - Safari

現象

JavaScript から算出されたCSS変数を取得しようとすると iOS Safari だけ取得できない…

取得できた
- Windows
  - Firefox 99.0
  - Google Chrome 100.0.4896.75
  - Microsoft Edge 100.0.1185.36
- Android 12 Pixcel 3
  - Google Chrome 96.0.4664.104
- Android 11 OPPO CPH2309
  - Google Chrome 100.0.4896.58
取得できない
- iPhone XR 15.2.1
  - Safari
- iPhone X 15.2.1
  - Safari
- iPad Pro （9.7インチ） 15.2.1
  - Safari
- iPad （第9世代） 15.3.1
  - Safari

原因

スマホ時だけ変数を利用したかったため、メディアクエリ内で変数を定義していたのが原因でした…

CSS

@media (max-width: 32.4375rem) {
  .mask {
    --mask-height: 500px;
    height: var(--mask-height);
  }
}

JS

const mask = document.getElementById('js-mask')
const maskHeight = getComputedStyle(mask).getPropertyValue('--mask-height')
console.log(maskHeight) // 空

解決方法

メディアクエリ外で変数を定義すればOK！
これで算出されたCSS変数を取得できました

CSS

+.mask {
+  --mask-height: 500px;
+}
@media (max-width: 32.4375rem) {
  .mask {
-   --mask-height: 500px;
    height: var(--mask-height);
  }
}

JS

const mask = document.getElementById('js-mask')
const maskHeight = getComputedStyle(mask).getPropertyValue('--mask-height')
console.log(maskHeight) // 500px