【解決方法】iOS Safari で JavaScript からCSS変数を取得できない

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