CMS Development

pixel
Participant

Flipcard Animation Not Working in IE

SOLVE

Hello!

I set up a flipcard animation following the below HubSpot article and the animation works in chrome but not in IE.  Currently in IE the card flips and displays the image again as opposed to showing text. I thought specific browsers were addressed in the article so I am not sure how to fix the issue.  

 

Can someone help figure out how to make the flip animation in IE look more like the flip in chrome? The goal is to have the photo show initially then on the flip, text on a solid background show.

 

Thanks in advance for your help!

 

Original article

https://designers.hubspot.com/blog/code-hacks-building-flipcards-on-the-hubspot-cms

 

Website:

https://www.neamgroup.com/clientfocus2019#speakers

0 Upvotes
1 Accepted solution
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

Flipcard Animation Not Working in IE

SOLVE

Hey @pixel 

 

Without doing too much research I'm pretty sure that IE's transform properties are still doing a little catch up to other browsers. Specifically the backface-visibility and the transform-style: preserve-3d. Check out CanIUse.com for specifics.

 

This stackoverflow post has a solution that seems to work in IE9 and up. Prior versions of IE if I'm not mistaken do not support these transforms. You'll notice the verndor prefixes in the solutions css: "-ms-transform-style: preserve-3d;"

 

Hope this helps!

Kevin Cornett - Sr. Solutions Architect @ BridgeRev

View solution in original post

2 Replies 2
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

Flipcard Animation Not Working in IE

SOLVE

Hey @pixel 

 

Without doing too much research I'm pretty sure that IE's transform properties are still doing a little catch up to other browsers. Specifically the backface-visibility and the transform-style: preserve-3d. Check out CanIUse.com for specifics.

 

This stackoverflow post has a solution that seems to work in IE9 and up. Prior versions of IE if I'm not mistaken do not support these transforms. You'll notice the verndor prefixes in the solutions css: "-ms-transform-style: preserve-3d;"

 

Hope this helps!

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
pixel
Participant

Flipcard Animation Not Working in IE

SOLVE

Hi @Kevin-C !

 

Thanks for posting this!  With some tinkering, we've been able to implement this on our site.  The flip now works great in IE so thank you for sharing. This was a great solution.