[alex5252Participant]

I removed that line of code and it is back to not workin in IE. Both front and back are showing at the same time (see attachment)

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.x-card-outer.flipped .x-face-outer.front {
      display:none !important;
}

Hope that helps.

[alex5252Participant]

That did not change anything.

[RadModerator]

This reply has been marked as private.

[axmentorParticipant]

Hello,

I’m having the same issues with the flip card for IE 11 as well. The website is at http://www.axtras.com. I’ve tried using the CSS as provided in this thread and it still doesn’t display properly and doesn’t have the flip animation.

Any help would be excellent!

Thank you for your time,
Huy

[ChristopherModerator]

Hi there,

Internet Explorer 9/10/11 do not support native CSS3 3D transforms, which is what we are using to animate the card element. These native CSS3 animations are much smoother than trying to do anything programmatically with JavaScript for example, which is why we have opted to use them. In IE 9, 10, and 11 the card will fallback to simply switching out the two sides as you hover (so essentially you won’t see the animation).

Thanks.

[axmentorParticipant]

After fiddling around with the CSS, I found some code that will make it the way I wanted to appear. I added this below:

.center-vertically.x-card-outer .x-face-content {
  background-color:white;
  width:100%;
}

.x-face-outer .front {
  background-color:white;
}

.x-card-outer .x-face-inner {
  background-color:white;
}

Hope this helps someone out there.

[JoaoModerator]

Hi There,

Thanks for the input for the community, we are glad you managed to find a solution.

Joao

[Author]

Posts