IE 11 Rendering issues

I’m having issues with renderings of forms, headers and other elements in internet explorer. Everything seems to work fine in Chrome, firefox and safari. I attached the screenshot of the homepage in Internet explorer, you can see the that the video doesn’t load and the mobile nav is loading when full screen on a desktop. How can I fix this?

Hey there,

Please check for the following first:

  1. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.

  2. Clear all caches including browser cache then deactivate your caching plugins and other optimization plugins.

  3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

  4. Test 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.

  5. Remove custom CSS, Javascript and templates.

  6. Contact your host to increase your allocated memory or do it yourself by adding this code in your wp-config.php

define( 'WP_MEMORY_LIMIT', '256M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

Thanks.

Do you use HTML5 the header? HTML5 elements seem to be loading incorrectly. Do they have any HTML5 callbacks to their scripts/CSS?

Hi There,

Yes, header uses the HTML5 and CSS3 flexbox, regretfully IE has partially support FlexBox Layout. See the Known issues tab on that link and see if you can apply the fix on your configuration. If you want to fully support the IE browser, since you have a basic header layout, I suggest that you use the standard header instead.

Regarding the background video, IE does not support the .webm format, please upload a .mp4 format and add it to the background video URL field separated with vertical bar |

Web Video

Hope this shed some lights,
Cheers!

I’ve added an MP4 fallback which did not work.

Hi there,

It’s still a webm video, you can confirm that by viewing the source code, example

<video class="x-mejs has-stack-styles" preload="metadata" autoplay="" loop="" muted="" id="mejs_8789705577654037_html5" src="https://www.smartcatrfid.com/wp-content/uploads/2016/09/HOME-3MB.webm" style="width: 1262px; height: 1014px;"><source src="https://www.smartcatrfid.com/wp-content/uploads/2016/09/HOME-3MB.webm" type="video/webm"></video>

Please try the mp4

Thanks!

Rad please view the full source which I’ve attached as a screenshot below.

This is for the following url: https://www.smartcatrfid.com/support/form-creation-support/getting-started/ which was also having issues.

Hi There,

Its the way you converted the video. I’ve recoded your .mp4 and mine works on IE. You can download it from the secure note below.

Also, please have the mp4 first and webm as second

e.g.

/wp-content/uploads/videos/smartcat-getting-started-recoded.mp4|/wp-content/uploads/2017/08/SmartCAT-Getting-Started-Video.webm

Hope it helps,
Cheers!

How can I better convert the video so it works next time? Why is mp4 first wouldn’t I want to load the lighter webm first? Why would it ever fallback to webm?

Hi There,

You need to optimized for progressive download or web optimize the video. Your webm file is 16mb, the mp4 that I decoded is only 6.7mb, and .mp4 is supported by most of the browser/version versus the .webm.

Thanks,

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