Issue with IE and flip animation

Question

UPDATE: Finally figured this out - I provided the answer HERE as well as below.

I have an unusual case where my flip animation does not work in IE (go figure) - however, it does work across all other browsers (Chrome, FF, Opera, Edge, and Safari)...

I'm not entirely sure what the root of the cause is here - I've searched a ton but nothing helped...A lot of people said to use the backface-visibility: hidden; with the -ms- prefix but that too did not work. I even tried using a tag on my html file such as:

but to no avail...URG.

Why does IE have to be so difficult :/

Anyway, this is what I got, I'll provide a sample below with the code being used along with a jsFiddle to demonstrate it.

PLEASE CHECK FIDDLE USING INTERNET EXPLORER and then compare using Chrome or a different browser.

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 pa { float: none; color: #28F; } .resume_abbr_info pa: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 -> Using 2.1.4

Here is the FIDDLE

I was able to test this on a windows 7 machine and the animation seems to work...However, on a windows 10 machine (using IE 11 ), it doesn't...Any ideas?

Any help is greatly appreciated!

Answer 1

Finally figured it out - It's not the best solution as it seems to stick a bit when the flip animation occurs - but it IS better than how it was displaying before which didn't show the animation at all - instead prior to this fix, it just showed the front side, then disappeared on click of button, and then reappeared on the back side...So I'd say that this is an improvement where at least now we see the actual flip animation take place.

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);
}

DEMO - View in IE10+ regardless of windows OS...