[RadModerator]

Hi there,

Unfortunately, we don’t have any fix for now. But we’re still on it 🙂

The issue with IEs is they are trying to different from other browser. Some features are not implemented the same was as other browser, specially the web standards that modern browsers has. But, the emergence of Edge browser is a good decision they made, it’s now evolving with web standards (not sure if 100% though).

https://en.wikipedia.org/wiki/Microsoft_Edge

We’re still looking a way or workaround for implementing this despite of older browsers limitation.

Thanks for understanding.

[jpjarvisParticipant]

Any progress with this issue?

Thanks

[ChristianModerator]

IE 11 is still not supported. Please stay tuned.

Thanks.

[whitingsmParticipant]

Wow this stinks. Totally eliminates my ability to use the flip card feature. 🙁

[FriechModerator]

Hi There,

Sorry for the difficulty, but this is really on IE trying to be different. We strongly recommend Chrome and Firefox as not only it is fully compatible, but have all the tools for developing a website.

Thanks.

[RedactiePartnersParticipant]

I found a “Workaround” for this.

For me it works now in IE11 on Win 7 to 10 and Firefox.
While not the most elegant solutions. It makes the card ‘usable’

Add the following CSS to the customizer or a child theme stylesheet:

.x-card-outer .x-face-outer.back {
    display: none;
}

.x-card-outer.flipped .x-face-outer.back {
    display: block;
}

.x-card-outer.flip-3d .x-face-outer {
    backface-visibility: visible;
}

.x-card-outer.flipped .x-face-outer.front,
.x-card-outer:hover .x-face-outer.front {
    display: none;
}

So the problem I had was that it was working in Chrome and IE11 (win8.1 and below) but on IE11 on Win 10 and Firefox it would flip the front card but just show the front card reversed 180 degrees while never showing the back card.
This is an issue with the preserve-3d option in IE11.
So what do we do in my CSS?

The way the card is layed out and how the css works is basically flipping both sides 180degrees while changing the layer order (front becomes back and back becomes front) this is where IE11 can’t handle it anymore.

So what we do is hide the back card at the beginning. then when hovering and the class flipped is added we show the back card again, while hiding the front card (this way the front does not interfere with the back)
Then we override the 3D visibility by targeting the .flip-3d class.
We set the backface-visibility to visible so that the cards are always visible.

Like I said this may not be the most elegant of solutions cause because of the way CSS works we hide the front before doing the flip. So you briefly see a upside down back card before it flips in Firefox, Chrome and IE11 on Win 10.
On Win8.1 and lower the 3D animation is turned of so it just changes the card on hover.

Good luck!

[JadeModerator]

Thank you for sharing your solution, 🙂

[skysiteadminParticipant]

Hey this last solution by redactie partners is great! The only thing that is makes flipping quite jerky for Firefox and Chrome…
In this case (what i did for my site) you can apply that CSS for IE only through specific to IE only media query!
Look here:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.x-card-outer .x-face-outer.back {
display: none;
}

.x-card-outer.flipped .x-face-outer.back {
display: block;
}

.x-card-outer.flip-3d .x-face-outer {
backface-visibility: visible;
}

.x-card-outer.flipped .x-face-outer.front,
.x-card-outer:hover .x-face-outer.front {
display: none;
}
}

This way the BRILLIANT solution of RedactiePartners will work for IE only and NOT affect Chrome and FireFox

[RadModerator]

Thanks for sharing. Cheers!

[flacnvinylParticipant]

EXCELLENT solution btw! Any thoughts on making the cards flip back quicker? In Edge the solution works great. In IE as soon as the mouse moves away the ‘reverse front card’ appears and then slowly flips back around.

[LelyModerator]

Hello Drake,

Please also try adding this custom CSS:

   @media all and (-ms-high-contrast:none)
     {
     .x-card-outer.flip-3d .x-card-inner{
        transition: transform .5s cubic-bezier(0.23, 1, 0.32, 1)
     }  /* IE10 */
     *::-ms-backdrop, .x-card-outer.flip-3d .x-card-inner{
       transition: transform .5s cubic-bezier(0.23, 1, 0.32, 1)
      }/* IE11 */
     }

Hope this helps.

[Author]

Posts