[Support request] Internet Explorer Video/Images Not Displaying

[Brett]

http://airport.hksandbox.com

Everything looks fine in FF and Chrome, but it looks like a whole bunch of things aren’t working in IE:

• Video isn’t displaying;
• Page header isn’t displaying
• Images in the masonry layout below aren’t displaying
• CTA section (just text and a button immediately above the ) aren’t displaying

The masonry and CTA are Beaver Builder, but I suspect it may all be the same issue. Wanted to see if you could provide some insight.

[Tom]

You have a javascript error which might be causing those issues.

Looks like it’s coming from the CSS Hero Animator plugin.

[Brett]

Tom – thanks for getting back so quickly.

I just saw that JS error as well. Deactivated and deleted the plugin. No change.

[Tom]

Looks a lot better to me now on Chrome at least.

What version of IE are you using?

[Brett]

I got rid of the background video in the hopes that this would clear out the issue. I can change over to a static image if that works.

I was looking at it in IE11 and its still not dislaying the header section at all. I see it is working now in IE10, except the flex properties aren’t being respected. I will need to sort that out, but still need to the header showing in 11.

[Tom]

Hmm, strange.. Our demo doesn’t seem to have any issues with IE11: http://demo.generatepress.com/page-header/

The fact it works in IE10 and not 11 is very strange and leads me to believe there’s something weird going on with the page. Have you tested with a new page with no other content on it?

[Brett]

OK, so I create a test page and as you suspected, the header is now showing up. However, I was hoping you may be able to assist.

I have been messing around with the various modules here. I would really like to keep the masonry grid post module if possible. It looks fine in IE 11, but there is definite overlap in IE10. I was hoping you could point me in the right direction as to how to solve this.

Also, do you have suggestions on how to deal with vertical align and other issues that result from lack of flexbox support in IE? Thought you may have some dependable suggestions.

[Tom]

It seems your site is password protected.

In GP Premium, I use the Flexibility script to give backwards compatibility for flexbox: https://github.com/jonathantneal/flexibility

So it’s masonry that’s causing the issues with the header? Where are you getting masonry from on that page?

[Brett]

Hi Tom:

Just wanted to follow up to close the loop on this somewhat. I appreciate the fantastic support. Due to the very tight timelines on the project, I had to switch to another theme to get the remaining functionality working. But I wanted to let you know that I was using the content tile module from the Powerpack Beaver Builder add-on. I was never able to get the header and that module to both work. Again, I realize that supporting other add-ons is beyond your scope, but you seem like a very thorough dev so I wanted to follow up.

[Tom]

Would definitely like to make sure it’s nothing in GP causing the issue, however I would need to have a page set up using Page Header + that module to really dive into it.

[Author]

Posts