IE11だけtransformの適用結果が違う

Question

CSSでハンバーガーメニューを作っています。
クリックした時にjQueryでclassを適用し、それをトリガーとして
CSSアニメーションで×マークに変化させているのですが、
IE11だけ添付の画像のように×マークが崩れてしまいます。

このような崩れ方をするのがIE11のバグのせいなのか、
何かコードの書き方がおかしいからなのか分からず困っております。
IE11でもChrome等と同じようなちゃんとした×の形に表示するにはどうしたらよいか、
どなたかご教授いただけないでしょうか？

よろしくお願い申し上げます。

<li id="globalMenu" class="hdMenu_item global">
<button class="hdMenu_btn">
  <div class="ico">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="txt">MENU</div>
</button>
--省略--
</li>

/*メニュー本体ボタンスタイル*/
.hdMenu_btn {
  width: 60px;
  height: 60px;
  padding: 0;
  margin: 0;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

.hdMenu_btn .ico {
  width: 25px;
  height: 25px;
  margin: 0 auto 5px;
}

.hdMenu_item.global .hdMenu_btn {
  background: #7dc6c6;
}

.hdMenu_item.global .ico {
  position: relative;
  margin: 2px auto 2px;
}

.hdMenu_item.global .ico span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: #000000;
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
}

.hdMenu_item.global .ico span:nth-child(1) {
  top: 0;
}

.hdMenu_item.global .ico span:nth-child(2) {
  top: 10px;
}

.hdMenu_item.global .ico span:nth-child(3) {
  top: 20px;
}

/*アニメーション部分*/
.hdMenu_item.global .ico span:nth-of-type(1) {
	animation: menu-bar01 .50s forwards;
}
@keyframes menu-bar01 {
	0% {transform: translateY(10px) rotate(45deg);}
	50% {transform: translateY(10px) rotate(0);}
	100% {transform: translateY(0) rotate(0);}
}
.hdMenu_item.global .ico span:nth-of-type(2) {
	transition: all .25s .25s;
	opacity: 1;
}
.hdMenu_item.global .ico span:nth-of-type(3) {
	animation: menu-bar03 .50s forwards;
}
@keyframes menu-bar03 {
	0% {transform: translateY(-10px) rotate(-45deg);}
	50% {transform: translateY(-10px) rotate(0);}
	100% {transform: translateY(0) rotate(0);}
}
.hdMenu_item.global .is-active .ico span:nth-of-type(1) {
	animation: active-menu-bar01 .50s forwards;
}
@keyframes active-menu-bar01 {
	0% {transform: translateY(0) rotate(0);}
	50% {transform: translateY(10px) rotate(0);}
	100% {transform: translateY(10px) rotate(45deg);}
}
.hdMenu_item.global .is-active .ico span:nth-of-type(2) {
	opacity: 0;
}
.hdMenu_item.global .is-active .ico span:nth-of-type(3) {
	animation: active-menu-bar03 .50s forwards;
}
@keyframes active-menu-bar03 {
	0% {transform: translateY(0) rotate(0);}
	50% {transform: translateY(-10px) rotate(0);}
	100% {transform: translateY(-10px) rotate(-45deg);}
}

Comments

[macaron_xxx]

提示いただいたコードにis-activeクラスをトグルするjavascriptを加えたもので実行しましたが、IE11にて✕が正常に表示されることを確認しました。提示いただいた箇所以外に問題がありそうですね。

[aKusano]

ありがとうございます。こちらの知り合いにも同じことを指摘されました。現在どこが影響しているのか検証しているところですがまだ見つからず…。

Answer 1

すみません、自己解決しました。

そもそもこちらに質問投げた部分のコードはスマホレイアウトの分だけでして、
本来はその後にPC向けの記述が続いていたのですが長くなるので省略しておりました。
そしてキャプチャのような不具合が出ているのは実はPCレイアウトの時だけでした。

PCレイアウトの方で不具合が出ていた原因は、@mediaの中に@keyframeを書いていたことでした。
メディアクエリの中に@keyframeを書くと、IEは無効になってしまうバグがあるようです。
このブログにズバリ、原因と解決法が書かれておりました。

PCだけで不具合が出ていたことに気づいた時、かすかな記憶でそういえば@mediaの中に@keyframe
書くとなんか不具合があったような気がしたので検索してみたら、ズバリ出てきました。

というわけで、不具合の発生条件をちゃんと確認してなかったのが敗因ですね。。。
気をつけます。