v0.11 not working on IE11

[omarkhatibco]

Hi,

the latest version v11 is not working any more in IE11, I tested it using my website + headroom playroom

It is full ok for me, if you say, you want to drop ie11 support.

this ticket is just an Info for you.

Best Regards Omar

[WickyNilliams]

I imagine this is due to needing to polyfill some DOM APIs in IE11. See the browser support section of the docs, which lists the APIs it depends on https://wicky.nillia.ms/headroom.js/. Looking at the list, I think it you need an Object.assign polyfill for IE11.

However, if you are happy for headroom to be a progressive enhancement only in browsers where it is natively supported (i.e. no polyfills), you can do something like:

if(Headroom.cutsTheMustard) {
  // put initialisation code here
}

This should avoid errors in unsupported browsers. Oh, and please excuse the bad name cutsTheMustard! I plan to eventually rename this to "isSupported".

[omarkhatibco]

Hi @WickyNilliams ,

Polyfills already there, also last working version in ie11 is v0.9.4

[WickyNilliams]

Hmm ok. I'll reopen this. Can you provide any more info? Error message in console? Stack trace?

Thanks

[omarkhatibco]

Hi @WickyNilliams,

there were no problem or error message in console, I think it's related to multiple classes support, because it can initiate it but can not add or remove the classes.

[WickyNilliams]

Ah yes, I forget IE11 doesn't support multiple args for classList add/remove.

I haven't tested it properly, but I think something like this should work for IE11, providing Object.assign etc are properly polyfilled also:

// converts classList methods from accepting a single arg to any number of args
function makeVariadic(method) {
  var nativeFn = DOMTokenList.prototype[method];

  DOMTokenList.prototype[method] = function () {
    for (let i = 0; i < arguments.length; i++) {
      nativeFn.call(this, arguments[i]);
    }
  };
}

function classListSupported() {
  var el = document.createElement("div");
  el.classList.add("a", "b");
  return el.className === "a b";
}

if (!classListSupported()) {
  makeVariadic("add");
  makeVariadic("remove");
}

[jasonwkf]

Hi @WickyNilliams, I encounter this problem too on the IE 11. Pardon me how to do you polyfill for the object.assign as I am using the headroom jquery? And the above work around where should add it?

Thanks Jason