search

Codeinwp / Ideal-Image-Slider-JS

Quite simply the ideal Image Slider in vanilla JS.
http://idealimageslider.com
GNU General Public License v3.0
1.57k stars 159 forks source link

Doesn't work in IE11 #45

Open sr8 opened 10 years ago

sr8 commented 10 years ago

The slider does not work in IE11. No images are shown at all.

allaroundtheworld1997 commented 9 years ago

Same here. Is there a workaround for this? (I love the slider!)

chamilcar commented 9 years ago

I love the slider too, but I ran into the same problem :(

joedrummer8993 commented 8 years ago

The problem seems to be that when deleting innerHTML, IE recursively deletes all of the child nodes. My fix was to check if the browser was IE (I only check back to 9 because I can't support anything below that) and do a "soft" delete of childNodes.

This shows up on about line 453

var isMSIE = /*@cc_on!@*/0; if (isMSIE || (Object.hasOwnProperty.call(window, "ActiveXObject") && !window.ActiveXObject)) { while (sliderEl.firstChild) { sliderEl.removeChild(sliderEl.firstChild); } } else { sliderEl.innerHTML = ''; }

If you don't want to do the IE check, that's fine, but looping through each child element to remove them isn't going to be nearly as fast as just blowing everything away in one go.

chmartinez commented 8 years ago

I used @joedrummer8993 's solution and it worked. Thanks!

AaricChenLegacy commented 8 years ago

+1 it work for me. thanks

msigley commented 6 years ago

@joedrummer8993 The issue with IE is the script is assuming per the w3c spec that the document.querySelector returns a static nodelist to the images in the HTML. https://developer.mozilla.org/en-US/docs/Web/API/NodeList IE does not do this. Instead it returns a live nodelist. This means changes to the images in the html also change the nodes in the nodelist which means this code deletes the entire nodelist: sliderEl.innerHTML = ''; In my fork I added a sliderEl.cloneNode(true) call before this to ensure a static nodelist that is disconnected from the DOM. Selector frameworks such as sizzle.js take a similar approach.