1
Help us understand the problem. What are the problem?

posted at

updated at

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

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

  • 取得できた:smile:
    • iPhone XR 15.4.1
      • Safari
    • iPhone X 15.4.1
      • Safari
    • iPad Pro (9.7インチ) 15.4.1
      • Safari
  • 取得できない:confounded:
    • iPad (第9世代) 15.3.1
      • Safari

現象

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

  • 取得できた:smile:
    • 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
  • 取得できない:confounded:
    • 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変数を取得できました:blush:

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

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
1
Help us understand the problem. What are the problem?