CSS変数を使ってcalc()で計算した量を、translate()で使用できない

###やりたいこと
箱をクリックすると移動するものを作ろうとしています。
CSS変数で箱の大きさを指定して、その大きさの2倍だけ動かしたいのですが、うまく動きません。ソースコードは以下の通りです。
###ソースコード

html
1<!DOCTYPE html>
2
3<html lang='ja'>
4  <head>
5    <meta charset='utf-8'>
6    <style>
7      /* 箱の大きさ */
8      :root {
9        --box-size: 150px;
10      }
11      /* 枠 */
12      .container {
13        border: 3px solid #333;
14        background: #ccc;
15        width: calc(var(--box-size)*3);
16        height: var(--box-size);
17        margin: 30px auto;
18      }
19      /* 箱 */
20      #box {
21        background: #fff;
22        width: var(--box-size);
23        height: var(--box-size);
24        transition: 0.5s;
25      }
26      /* 箱をクリックしたとき動かす量 */
27      #box.move {
28        /* transform: translate(200px,0); */
29        /* transform: translate(var(--box-size),0); */
30        transform: translate(calc(var(--box-size)*2),0);
31      }
32    </style>
33  </head>
34
35  <body>
36    <!-- 枠 -->
37    <div class='container'>
38      <!-- 箱 -->
39      <div id='box'></div>
40    </div>
41
42    <script>
43      const box = document.getElementById('box');
44      
45      // 箱を押したら動くようにクラスを追加。
46      box.addEventListener('click', () => {
47        if (box.classList.contains('move')) {
48          box.classList.remove('move');
49        } else {
50          box.classList.add('move');  
51        }
52      });
53    </script>
54  </body>
55</html>

###試したこと
コメントアウトしているようにtransform: translate(var(--box-size),0);とすると、箱の大きさ分だけ移動しました。しかし、calc()で箱の大きさの2倍だけ動かそうとすると、箱は動きませんでした。

###環境
Microsoft Edgeを使用しています。VersionはEdgeHTML 16.16299です。

行動規範の内容に同意します

回答1件

ベストアンサー

Chromeで動作確認したところ動きました。

二倍しない場合はEdgeでも動作するということなので、
可能性として一番大きいのは変数varに対するcalc計算のみ、お使いの環境でサポートされていないことかなと思います。
calcのブラウザ互換性について今一度調べてみてください。

投稿2019/02/16 14:15

編集2019/02/16 14:21

yu-smc

総合スコア610

退会済みユーザー

2019/02/16 23:10

回答ありがとうございます。 Can I use...で調べてSupportedになっていたので使えるかと思ったのですが、必ずしも使えるわけではないんですね。枠（.container）のwidthではcalc()が使えているので、関数の引数にcalc()を使用すると、Edgeではうまく動作しないことがあるというような感じでしょうか。ひとまず、ブラウザ互換性の問題ということで、今回はcalc()を使用しないようにしたいと思います。ありがとうございました。

行動規範の内容に同意します