Problems/Issues across different browsers (IE)

[JacobNFerguson]

Hi team, I’ve got my website almost all finished up and looking good in Chrome… but when I go to IE there are a number of problems.

1. The classic cards in the Join section are not flipping, and are blending the front-side background images with the back-side backgrounds when “flipped.” I’m guessing I have an error somewhere in the custom CSS that I applied?

2. The white borders of the accordion elements in the FAQ section are not disappearing as I have set them to do with Custom CSS… again, only in IE. It is fine in Chrome. (I haven’t checked other browsers yet).

3. The mouse arrow turns into a cursor when hovered over the scroll top anchor in IE… no big deal, but probably not right.

-Also-

I’m not sure if these last two fall beyond the scope of your support… if so, perhaps you could point me in the right direction as to the underlying problem that might be causing the issues:

4. The Revolution Slider text does not animate properly in IE… I have a 10px blur filter set for the text in Animation > + (Advanced Settings) > Filters > Blur. It animates properly in Chrome but not IE… is this a browser/hosting thing, or a Revolution Slider thing do you think?

5. Also same question for the coverflow I inserted via raw content in the Music section. It appears fine in Chrome but in IE the right-side thumbnail images overlap each other. Do you think this is a browser/hosting thing or should I consult the developer of the plug-in?

Thanks a lot!

[friech]

Hi There,

Thank you for writing in, yes most of this issues are browsers (IE) incompatibility issue. The Card Element is not intended to have the flip effect in IE as that browser does not support 3D CSS transitions correctly. With that said Cards element does not have the 3D look and flipping animation on IE.

To resolve the front image showing on the back and scroll to top cursor issue, please add the custom CSS below to Theme Options > CSS

/*IE only CSS*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	/*fix transparent semi-background on the back of the card*/
	.x-face-outer.back {
		background-color: #000;
	}
	/*fix scroll to top cursor*/
	.x-scroll-top {
		cursor: default;
	}
}

Regarding the accordion border, IE does not read the color value you applied, please change the value to transparent or set the border-width to 0 instead. (border-width:0;)

Both of the Slider issues is also an incompatibility issue, IE does not support the CSS filter effects.

The best thing you can do is to encourage your viewers to use modern browsers to maximize their browsing experience.

Have a great day,
Cheers!

[JacobNFerguson]

OK, thanks. That was well explained. And thanks for the code, it fixed everything except the cards background issue (the first issue I listed)… I’m not sure the code is working for that. Can you check it again and make sure it was entered correctly? I entered it into Theme Options > CSS like you said.

Thanks!

[friech]

Hi There,

On the CSS code given, please update this line background-color: #000; to this background-color: #000000 !important;

And add the missing semicolon [ ; ] on this lines.

Hope it helps,
Cheers!

[JacobNFerguson]

Thank you sir.

[nabeel]

You’re most welcome!