No images on IE only black box with white x

Question

I have multiple flex sliders loading on this page: http://pamelahnelson.com/category/public-art/ Normally if you click the white 'x', they show, but I have it triggering an event to slide open the detail view. Regardless, I think it is a security setting in the browser or similar that is blocking them, but what I really want to know is why this is being triggered? And of course, if there is a work around so that IE doesn't do this. I've used multiple flex sliders before without this problem.

Solution 1

It appears that IE is aborting the image load:

This could be because the script is trying modify an element before it's fully loaded.

There is quite a bit of js going on in your site so look into whatever script is writing the image files to the DOM.

There is also a couple of errors in the console:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.js?ver=1.10.2:4

cannot call methods on isotope prior to initialization; attempted to call method 'reLayout'

I would start with fixing the console errors since those cause IE quite a bit of heartburn.

Solution 2

In 2018 this could be related to the X-Content-type: nosniff header being emitted by the web server. This tells the browser to pay attention to the mime type (content-type header) in the image data response from the server. If it is not image/* then IE11 will decide it is dodgy and show the black-box with white-cross. Use Fiddler or similar to observe the headers from the server to confirm.

Comments

[tainterr]

Thank you for reminding me, I had meant to clear out that relayout error. Unfortunately that didn't fix it, BUT the aborted images for IE was the clue that sent me here: imagesLoaded: IE9 occasionally aborts image load That thread didn't provide me with a clear solution but did point out that imagesLoaded was part of the problem. I removed imagesLoaded and it cleared up the aborted images!