Windows 10 w / IE11 css动画错误

Question

当点击一个按钮时，我创建了一个简单的css动画，div用3 A折叠以选择字体大小。在Windows 7上的IE11中可以正常工作，但是在Windows 10中文本最好是错误的。有关解决/修复的任何建议吗？

* bug通常在第一次加载时发生，无论是A还是只有1。

Windows 10 bug

Windows 7 working as intended

https：// jsfiddle.net/2h3s4tvz/5/ //代表不够多的链接

$(document).ready(function() {
  $('#FontSize').click(function() {
    if ($('#fontChangerNew').hasClass('flipped')) {
      $('#fontChangerNew').removeClass('flipped')
    } else {
      $('#fontChangerNew').show();
      $('#fontChangerNew').addClass('flipped');
    }
  });

  $('#smallFont').click(function() {
    alert('small font');
  });

  $('#mediumFont').click(function() {
    alert('medium font');
  });

  $('#largeFont').click(function() {
    alert('large font');
  });
});

#fontChangerNew div {
  display: inline-block;
  cursor: pointer;
  transform: rotateX(180deg);
}

#fontChangerNew {
  clear: both;
  position: absolute;
  animation: flipperUp 0.7s;
  animation-fill-mode: forwards;
  -webkit-animation: flipperUp 0.7s;
  -webkit-animation-fill-mode: forwards;
  display: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #6BAADE;
  padding: 0px 5px 0px 5px;
  border: 1px solid black;
  border-top-width: 0px;
  width: 138px;
  margin-left: 2px;
  margin-top: 3px;
  -webkit-transform: perspective(350px) rotateX(-90deg);
  transform: perspective(350px) rotateX(-90deg);
  -webkit-transform-origin: 50% 0%;
  height: 22px;
  transform-origin: 50% 0%;
}

#fontChangerNew.fontChangerShow {
  animation-name: fontChangeShow;
  animation-duration: 1.6s;
  animation-fill-mode: forwards;
}

#fontChangerNew div {
  display: inline-block;
  cursor: pointer;
  padding: 0px 5px 0px 5px;
}

#fontChangerNew div#smallFont {
  padding-top: 6px;
}

#fontChangerNew div#mediumFont {
  padding-top: 4px;
}

#fontChangerNew div#largeFont {
  padding-top: 2px;
}

@keyframes flipper {
  0% {
    transform: perspective(350px) rotateX(-90deg);
  }
  100% {
    transform: perspective(350px) rotateX(-180deg);
  }
}

@-webkit-keyframes flipper {
  0% {
    -webkit-transform: perspective(350px) rotateX(-90deg);
  }
  100% {
    -webkit-transform: perspective(350px) rotateX(-180deg);
  }
}

@keyframes flipperUp {
  0% {
    transform: perspective(350px) rotateX(-180deg);
  }
  100% {
    transform: perspective(350px) rotateX(-90deg);
  }
}

@-webkit-keyframes flipperUp {
  0% {
    -webkit-transform: perspective(350px) rotateX(-180deg);
  }
  100% {
    -webkit-transform: perspective(350px) rotateX(-90deg);
  }
}

#fontChangerNew.flipped {
  animation: flipper 0.7s;
  animation-fill-mode: forwards;
  -webkit-animation: flipper 0.7s;
  -webkit-animation-fill-mode: forwards;
}

button {
  background-color: #6BAADE;
  border-radius: 5px;
  width: 152px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="position:relative;display:inline-block;margin:100px;">
  <div id="fontChangerNew">
    <div id="smallFont" style="font-size:10pt;">A</div>
    <div id="mediumFont" style="font-size:12pt;">A</div>
    <div id="largeFont" style="font-size:14pt;">A</div>
  </div>
  <button id="FontSize" name="Font Size">Font Size</button></div>

感谢。