Problem with Internet Explorer

Support
#1

Hello,

When i access my site esrp.com/work in internet explorer this section is broken. Can you take a look?

https://drive.google.com/drive/folders/1llfcE4knOaM_27ct3B6sntbZ-ii2Ocdn?usp=sharing

#2

Hey XXIIBrands,

Thanks for posting in! I have checked the page and it seems that WPRocket has minified the page. There are also some broken html added to the page which may have caused the issue. I would recommend that you temporarily deactivate WPRocket or any caching plugin so we can test again. We must find out if you have inserted a broken html as well. If you did, please share it in your next response. We need to check and correct it.

Best Regards.

#3

I deactivated WPRocket, I am looking for the broken html

#4

Hi @social180,

Please try the solution provided here.

Hope it helps,
Cheers!

#5

everything was fine yesterday and now it looks like this.

#6

Hi @social180,

Does that card elements have customization on it? I can’t replicate this issue on my dev site, please do testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If that did not work, please provide us login credentials in a secure note so we can take a closer look.

Thanks,

#7

this is the custom css we have

.x-card-outer .x-face-title {
letter-spacing:0;
font-weight:800;
font-size:36px;
line-height:1;
}

.back {font-weight:400;
font-size:16px;}

#8

Hi @social180,

Thank you for the login credentials, now I’ve taken a closer look, regretfully the Classic 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 does not have the 3D look and flipping animation on IE.

The second issue is your card element has a transparent background, that is why we can see both front and back content at the same time (looks overlapping). So that said we need the card element to have a solid background-color on IE.

Please remove the previous custom CSS provided above, and add this instead.

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
	.x-card-outer .x-face-outer.front,
	.x-card-outer .x-face-outer.back {
		background-color: #122141 !important;
	}
	.x-card-outer.back {
    height:200px;
  }
}

Remember to clear your caching plugin after these changes.

Cheers!

#9

Okay, not ideal but it helps. Can you see why the icon on the right blew up after doing what you asked?

#10

#11

Hi @social180,

I’m still seeing the custom CSS below being applied to the image (logo), please remove it, it seems to be in your Theme Options > CSS.

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

Thanks,

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.