CMS Development

pixel
参加者

Flipcard Animation Not Working in IE

解決

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 いいね!
1件の承認済みベストアンサー
Kevin-C
解決策
名誉エキスパート | Solutions Partner
名誉エキスパート | Solutions Partner

Flipcard Animation Not Working in IE

解決

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

元の投稿で解決策を見る

2件の返信
Kevin-C
解決策
名誉エキスパート | Solutions Partner
名誉エキスパート | Solutions Partner

Flipcard Animation Not Working in IE

解決

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
参加者

Flipcard Animation Not Working in IE

解決

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.