IE11でlinear-gradientのcolor-stopにcalc()を使うと効かない場合がある

久しぶりにハマったので忘れないように記事にしておきます。calc() はIE9から使える便利なCSS関数なのですが、グラデーションで使うときには注意が必要かもしれません。

問題のグラデーション

.gradient 
{
  width: 500px;
  height: 100px;
  background: linear-gradient(to bottom,
                              #e6ac27 calc(50% - .5px),
                              #f6f7bd calc(50% - .5px), #f6f7bd calc(50% + .5px),
                              #80bca3 calc(50% + .5px));
}

上半分と下半分で色を変え、中央に1pxの線を引くグラデーションです。calc(50% – .5px) と calc(50% + .5px) で1pxの線を表現しています。

IE11の挙動がおかしい

IE11の場合だけ color-stop が効かないのです。しかも、毎回効かないという訳ではないです。どのような場合にこの現象が起きるかは分かりません。

解決策

background-sizeをcalc()で指定

.gradient 
{
  width: 500px;
  height: 100px;
  background: linear-gradient(to bottom,
                              #e6ac27 calc(50% - .5px),
                              #f6f7bd calc(50% - .5px), #f6f7bd calc(50% + .5px),
                              #80bca3 calc(50% + .5px));
  background-size: 100% calc(100%);
}

background-size を追加します。 calc() を使って設定します。今回は縦方向のグラデーションなので、2番目に calc() を指定します。これでIE11にも反映されます。

複数の背景画像

.gradient 
{
  width: 500px;
  height: 100px;
  background: linear-gradient(to bottom, #f6f7bd, #f6f7bd),
              linear-gradient(to bottom, #e6ac27, #e6ac27),
              linear-gradient(to bottom, #80bca3, #80bca3);
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% 50%, 100% 50%;
  background-position: 0 calc(50% - .5px), 0 0, 0 100%;
}

こんな感じで３つのパーツに分けてやる方法もあります。