Flip Card Issue In IE11

[LGFproductionsINC]

I have a page that has a flip card with a semi-transparent background which shows through the text on the backside of the card before the mouse hovers over it when in IE11 (works fine in Chrome, Edge and Firefox). About half a year ago, you reported to another user that in IE11 the background on the flip card had to be a solid color. Is this the same or have there been updates to fix this?

Thanks

[LGFproductionsINC]

One more thing regarding flip cards and IE11

On my PC, the home page flip cards look fine even though they don’t actually flip. On my laptop screen though, the flip cards on the home page become ‘messed up’ and the photos are not lined up on the blue background of the flip card. Then as the screen is shrunk down even smaller, the flip cards start to put the photos over the text to the side of them.

Any kind of fix for this?

[paul.r]

Hi Carl,

You can try adding this in Theme Option > CSS

.x-card-outer.flip-3d.flip-from-right .back {
    display: none;
}

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

Hope that helps

[LGFproductionsINC]

Hi Paul

That didn’t seem to fix the problem.

[friech]

Hi Carl,

That is a bug in IE where it does not support the max-width: 100%; we apply on images. With that property, images should respond to its parent div’s width, but it’s not on IE. To fix this issue please add the following custom CSS to Theme Options > CSS

/*image and card fix on IE*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   .x-face-graphic img,
   .x-image img {
   	width: 100% !important;
   }
}

Hope it helps,
Cheers!