Card Element Issues in IE/Edge

[ehsd]

We have a card element on a page. In IE 11/Old Edge (non-chrome) the back is inaccessible. The back houses a download link from the button. In IE/Edge, the card doesn’t flip. I’m guessing it could be an issue with the animation. Is it jQuery-based?

Running Pro 4.10 and Wordpress 5.6

[ehsd]

I noticed there are also issues with the Tabs element. It only allows a visitor to access the default tab, others are greyed out on IE11/Old Edge. We have several regular pages using the tab element via shortcode.

I am not able to view the console or inspect the page in Edge as there seems to be a Edge/Windows bug the broke the Edge devtools after windows 1803.

In IE11, I can see a JS error:
missing ')'
/wp-content/themes/pro/cornerstone/assets/dist/js/site/cs.514eb0c.js.pagespeed.ce.k2nYQaeAxP.js file, (1,1075)

[marc_a]

Hi @ehsd,

Thanks for reaching out.

A few hours ago we have released a new version of the theme with some fixes, I would recommend you to update your theme to the latest version because it might able to tix your issue.

Hope that helps.

Thank you.

[ehsd]

I updated the site to Pro 4.0.11 shortly after it was released yesterday. Issue remains. I also notice it is effecting the accordion element we have on a few pages as well as the card and tab elements mentioned in the original post.

[ruenel]

Hello @ehsd,

Since this is a new update, kindly clear or regenerate your PageSpeed cache and minified resource files. It is best that you temporarily deactivate PageSpeed and any other caching plugin while we are troubleshooting your issue. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[VRANKOVINA]

copy this issue. Tab element in Ms edge is disfunctional. Theme is Pro 4.0.11.

[ehsd]

As it seems I am not the only one experiencing this, This looks to be an issue with the JavaScript in the theme when rendered in Edge/IE.

I cleared the Cloudflare cache. The PageSpeed is an Apache module on the server and not a cache.

[nabeel]

Hi @ehsd and @VRANKOVINA ,

I tested the Card and Tabs elements in IE11 and Edge, Both elements works in Edge but I was able to replicate the issue in IE11. I’ve submitted this to our issue tracker so the developers will be made aware of it.

As a temporary fix for the Card element as this can be fixed using CSS only, you can add the following code in the Theme Options > CSS:

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   .x-card:hover .x-card-face.is-back {
        transform: rotate3d(1, 0, 0, 0deg);
   }
}

You might not get an animation with the above code but this will fix the flipping issue. Please note that this is only a temporary fix, you must remove the code once the fix is released.

Hope this helps!

[alexander]

Hi everyone,

This is fixed for the next release which will be coming out as early as next week.

[ehsd]

Thanks for the update. I was able to implement the IE workaround posted by @nabeel. These continue to not function in legacy Edge. Hopefully the next release will address this. And hopefully soon I won’t need to worry about Legacy Edge!

[ruenel]

You are welcome @ehsd.

[ehsd]

Pro 4.1.2 looks to have resolved these in both IE/Legacy Edge

[alexander]

Glad to hear it is working for you now! Thanks for confirming.