IE和翻轉動畫的異常情況

Question

我有一個不尋常的情況，我的翻轉動畫無法在IE中運行（如圖）-但是，它可以在所有其他瀏覽器（Chrome，FF，Opera，Edge和Safari）中運行...

我不能完全確定問題的根源在哪里-我搜尋了很多，但沒有任何幫助...很多人說使用backface-visibility: hidden; 帶有-ms-前綴，但是那也不起作用。 我什至嘗試在HTML文件中使用<meta>標記，例如：

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=10; IE=11; IE=edge">

但無濟於事...

為什么IE必須如此困難：/

無論如何，這就是我所得到的，我將在下面提供一個示例，其中將使用與jsFiddle一起使用的代碼進行演示。

請使用INTERNET EXPLORER檢查文件，然后使用Chrome或其他瀏覽器進行比較。

HTML：

<div class="resume_contact_info_wrapper">
  <div class="resume_contact_info">
    <div class="front">
      <div class="resume_abbr">
        <p>Email |</p>
        <p>Phone |</p>
        <p>Located |</p>
        <p>Website |</p>
      </div>
      <div class="resume_abbr_info">
        <p>email@example.com</p>
        <p>(550)555-5555</p>
        <p>Some State</p>
        <p><a href="#">Example.com</a></p>
      </div>
      <div class="resume_hire">
        <a href="#">View Portfolio</a>
        <a href="#">View as PDF</a>
        <p>→   Check Availability   ←</p>
      </div>
    </div>
    <div class="back">
      <div class="schedule">
        <p>Availability Calendar 2016</p>
      </div>
      <div class="resume_abbr">
        <p>Jan |</p>
        <p>Feb |</p>
        <p>Mar |</p>
        <p>Apr |</p>
        <p>May |</p>
        <p>Jun |</p>
        <p>Jul |</p>
        <p>Aug |</p>
        <p>Sep |</p>
        <p>Oct |</p>
        <p>Nov |</p>
        <p>Dec |</p>
      </div>
      <div class="resume_abbr_info">
        <p>Expired</p>
        <p>Expired</p>
        <p class="unavailable">Unavailable</p>
        <p class="unavailable">Unavailable</p>
        <p class="unavailable">Unavailable</p>
        <p class="available">Available</p>
        <p class="available">Available</p>
        <p class="available">Available</p>
        <p class="available">Available</p>
        <p class="available">Available</p>
        <p class="available">Available</p>
        <p class="available">Available</p>
      </div>
      <div class="resume_hire">
        <p>→   Flip Back   ←</p>
      </div>
    </div>
  </div>
</div>

CSS：

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.resume_contact_info_wrapper {
  width: 35%;
  min-height: 168px;
  padding: 0;
  margin: 0;
  float: left;
  transition: all 0.2s;
  perspective: 800px;
}

.resume_contact_info {
  width: 100%;
  padding: 0;
  margin: 0;
  float: left;
}

.front,
.back {
  width: 100%;
  padding: 0 0 10px 0;
  margin: 0;
  background: #DDD;
  box-shadow: inset 0 1px #FFF, 0 -1px #000, 0 1px #D1D1D1, -1px 0 #000, 1px 0 #C5C5C5;
  border: 5px solid rgba(0, 0, 0, 0.7);
  border-radius: 3px;
  backface-visibility: hidden;
  transition: all 0.4s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
}

.back {
  transform: rotateY(-180deg);
}

.flipped .back {
  transform: rotateY(0deg);
}

.flipped .front {
  transform: rotateY(180deg);
}

.resume_abbr {
  width: 35%;
  padding: 0;
  margin: 0;
  float: left;
}

.resume_abbr p {
  width: 100%;
  padding: 0;
  margin: 0;
  float: left;
  color: #666;
  font-size: .9em;
  font-weight: bold;
  text-align: right;
  text-shadow: 1px 1px #F1F1F1;
  cursor: default;
}

.resume_abbr p:first-child {
  padding: 10px 0 0 0;
}

.resume_abbr_info {
  width: 65%;
  padding: 0;
  margin: 0;
  float: left;
}

.resume_abbr_info p {
  width: 100%;
  padding: 0 0 0 5px;
  margin: 0;
  float: left;
  color: #777;
  font-size: .9em;
  text-shadow: 1px 1px #F1F1F1;
  cursor: default;
}

.resume_abbr_info p:first-child {
  padding: 10px 0 0 5px;
}

.resume_abbr_info p.available {
  color: #27AE60;
}

.resume_abbr_info p.unavailable {
  color: #C0392B;
}

.resume_abbr_info p a {
  float: none;
  color: #28F;
}

.resume_abbr_info p a:hover {
  text-decoration: underline;
}

.schedule {
  width: 100%;
  padding: 0;
  margin: 10px 0 0 0;
  float: left;
}

.schedule p {
  width: 100%;
  padding: 0;
  margin: 0;
  float: left;
  font-size: .9em;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px #F1F1F1;
}

.resume_hire {
  width: calc(100% - 20px);
  padding: 0;
  margin: 0 10px;
  float: left;
}

.resume_hire a {
  width: calc(50% - 5px);
  padding: 5px 0;
  margin: 12px 5px 0 0;
  border: 1px solid #28F;
  float: left;
  color: #28F;
  font-size: .75em;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px #F1F1F1;
}

.resume_hire a:last-of-type {
  margin: 12px 0 0 5px;
}

.resume_hire a:hover {
  background: #28F;
  box-shadow: inset 0 1px #459CFF;
  color: #DDD;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
}

.resume_hire p {
  width: 100%;
  padding: 5px 0;
  margin: 8px 0 0 0;
  background: #C0392B;
  box-shadow: inset 0 1px #E74C3C;
  border: 1px solid #C0392B;
  float: left;
  color: #DDD;
  font-size: .75em;
  font-weight: bold;
  text-align: center;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  cursor: pointer;
}

.resume_hire p:hover {
  background: #E74C3C;
  box-shadow: inset 0 1px #FF5441;
  border: 1px solid #E74C3C;
}

JS：

/*!
 *  Author: Michael R. Draemel
 *                  http://draemel.com/
 */
$('.resume_hire p').click(function() {
  $('.resume_contact_info').toggleClass('flipped');
});

jQuery->使用2.1.4

這是FIDDLE

任何幫助是極大的贊賞！

更新：

因此，我能夠在Windows7機器上對此進行測試，並且動畫似乎可以正常工作...但是，在Windows10機器（使用IE11）上，它...沒有任何想法嗎？

Answer 1

終於找到它了-這不是因為它似乎在翻轉動畫時堅持了一下最佳的解決方案-但它比它是如何顯示之前它並沒有表現出動畫要好-而不是在此之前修復，它只是顯示了正面，然后在單擊按鈕時消失了，然后又出現在背面...所以我要說這是一種改進，至少現在我們可以看到實際的翻轉動畫發生了。

CSS：

.resume_contact_info_wrapper {
  width: 25%;
  min-height: 168px;
  padding: 0;
  margin: 0;
  float: left;
  transition: all 0.2s;
  perspective: 800px;
    /* IE fix - Without this, flip animation is not seen */
    -ms-transform: perspective(800px) rotateY(0);
}

演示 -在IE10 +中查看，無論Windows OS是什么...

Frickin'IE ...