ShadowBox image disappears on IE10

Question

I am having an issue with ShadowBox on IE10, where by any image that pops up, suddenly disappears. (The script I am using: http://www.shadowbox-js.com/ )

This does not seem to occur with my own testing on IE9 or IE11. For some reason, IE10 has an issue that an older and newer version of IE does not have.

http://tokheimprofleet.com/dispenser/quantium-110/#dispenser-gallery

If you follow the link above, you can see an example of where this is occurring. Click any image in IE10 in the gallery. It will pop up as expected, and then suddenly disappear.

All other browser are not affected and work normally. Does anyone have any knowledge on why this is happening?

Thanks, Michael.

Answer 1

Just playing around with the DOM in IE and it appears to be the following div having a position of absolute. Interestingly this div does not appear to be in the slides that show correctly.

<div id="sb-drag-proxy" style="width: 555px; height: 565px; position: absolute; cursor: move; background-color: rgb(255, 255, 255);"></div>

If i un-tick position: absolute in the CSS properties window then the image underneath comes back again.

Maybe it might be possible to hook into the onChange event and grab that div and change its properties or hide it.

$('#sb-drag-proxy').hide();

Maybe

<script type="text/javascript">
Shadowbox.init({
    onChange: function(){
        $('#sb-drag-proxy').hide();
    }
});
</script>

Just a thought....

---

UPDATE

Just noticed that the div #sb-drag-proxy has a white background-color property that when set to transparent fixes the issue, try adding the following css style

#sb-drag-proxy{background-color: transparent !important;}

---

UPDATE 2

If the above does not work then according to the shadow box forum http://www.shadowbox-js.com/forum.html (search for post titled "draggable and Internet Explorer 10") which then links to the following blog post, a fix is to add a meta tag to your page to force a different IE version. It is in spanish but you can get the gist.

http://bikertb-blog-howto.blogspot.co.uk/2013/10/hack-para-hacer-funcionar.html

<meta http-equiv="X-UA-Compatible" content="IE=9" />