IEとEdgeでCSSアニメーションにcalc()を使用すると動かないバグ

IEとEdgeでCSSアニメーションにcalc()を使用すると動かないバグ

CSSアニメーションにcalc()を使用していたが、IE・Edgeで動かなかったので、備忘録として残しておきます。

calc()とは

calcとは、css内で四則計算(足し算や引き算など)を行うことができる関数です。

対応状況

Opera Mini以外のモダンブラウザで対応しています。

calc()の主要なバグ

先ほど、Opera Mini以外のモダンブラウザに対応しているといいましたが、一部のブラウザでは、バグが発生しているようです。

– Firefox does not support width: calc() on table cells. Bug Report
– Firefox <48 does not support calc() inside the line-height, stroke-width, stroke-dashoffset, and – stroke-dasharray properties. Bug report
– IE & Edge are reported to not support calc inside a ‘flex’. (Not tested on older versions)
This example does not work: flex: 1 1 calc(50% – 20px);
– Safari & iOS Safari (both 6 and 7) does not support viewport units (vw, vh, etc) in calc().
– IE11 does not support transitioning values set with calc()
– IE11 is reported to not support calc() correctly in generated content
– IE11 is reported to have trouble with calc() with nested expressions, e.g. width: calc((100% – 10px) / 3); (i.e. it rounds differently)
– IE10, IE11, and Edge < 14 don’t support using calc() inside a transform. Bug report
– IE 9 – 11 don’t render box-shadow when calc() is used for any of the values
– IE10 crashes when a div with a property using calc() has a child with same property with inherit.
– IE 9 – 11 and Edge do not support width: calc() on table cells. Bug Report
– Firefox does not support calc() on color functions. Example: color: hsl(calc(60 * 2), 100%, 50%). Bug Report

Can I use…より

Can I use…には、CSSアニメーションのバグついては、報告されていないようでしたが、ググったら、stackoverflowなどで同じような症状は、報告されていますね。

対応策

一時的な対応策として、IE・Edgeに対して、CSSハックをして、別のCSSを当てました。

CSSハック

IE10 & 11

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .selector {
    property: value;
  }
}

Edge

@supports (-ms-ime-align: auto) {
  .selector {
    property: value;
  }
}

終りに

Thank IE and Edge.