Errors with => function in IE11


Topic: Errors with => function in IE11

kellyjromer pro premium priority asked 6 years ago

Hello, i realize IE11 is no longer supported by MDB. However, 40% of our website users still insist on using IE11 we think due to corporate requirements. So, we are trying to do our best to user default browser functions for IE11 users while using MDB functions for all other supported browsers. We detect IE11 and ask them to consider a supported browser. However, we have to find a way to do our best to support them until they switch as many users apparently don't have a choice until Microsoft officially stops supporting IE11 in a few years.

One particular issue we are having is with the => function causing errors that are unrecoverable in IE11. There are 77 instances of => in your code. Is there anything you can do to help escape those =>s or something to prevent the errors in IE11?

An example is this:

($ => {

const SCROLLING_NAVBAR_OFFSET_TOP = 50;

$(window).on('scroll', () => {

const $navbar = $('.navbar');
if ($navbar.length) {

if ($navbar.offset().top > SCROLLING_NAVBAR_OFFSET_TOP) {

$('.scrolling-navbar').addClass('top-nav-collapse');
} else {

$('.scrolling-navbar').removeClass('top-nav-collapse');
}
}
});
})(jQuery);
 
This stops IE11 in it's tracks, and it isn't a graceful failure. That average user won't even notice it's stopped working. We know IE11 suuuuuucks, but any ideas to help?

Bartłomiej Malanowski staff pro premium commented 6 years ago

Could you please try to update MDB to the recent version? 


kellyjromer pro premium priority commented 6 years ago

Thank you for the quick response. We are on the most recent version to my knowledge. Which version are you referring to?


Bartłomiej Malanowski staff pro premium commented 6 years ago

Do you import mdb.js or include only required components? 


kellyjromer pro premium priority commented 6 years ago

We use mdb.js in its entirety. While I understand that IE11 isn't supported, there are still more IE11 users worldwide than Edge. It's a significant portion of the world population at 11% or so depending on where you look. Is it really hard to get some of these smaller things working in IE11?


Bartłomiej Malanowski staff pro premium commented 6 years ago

Yesterday we've released MDB 4.5.16. Do you have the same issue with the recent version?


kellyjromer pro premium priority commented 6 years ago

I will check. Did you add some things to that release that would help with IE11?


Bartłomiej Malanowski staff pro premium commented 6 years ago

Recently, we've updated our babel config so it should be better now 


kellyjromer pro premium priority commented 6 years ago

OK thanks. I will see if this helps.


kellyjromer pro premium priority commented 6 years ago

We did a test of 4.5.16. The select component now renders well enough in IE11.

However when you actually select one of the options it errors out at line 20745 in the mdb.js file.

var keyboardEvt = new KeyboardEvent('change', {
     bubbles: true,
     cancelable: true

});

Error states: "Object doesn't support this action"

Any quick workaround for this?


Bartłomiej Malanowski staff pro premium commented 6 years ago

Currently, I don't have any quick workaround in my mind. That's the something we need to work on


kellyjromer pro premium priority commented 6 years ago

OK, thanks for letting me know. We have a big release in mid-January. Will you address it sometime soon? Or do we need to figure out something on our own for this? While it's nice that we can render the select component now, it's useless if the user can't click on the selection from the list. Ya know?


Bartłomiej Malanowski staff pro premium commented 6 years ago

I can't promise you much, but if you really need to fix it quickly, you can try to implement this: https://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work


kellyjromer pro premium priority commented 6 years ago

Thanks. We will try that out!


kellyjromer pro premium priority commented 6 years ago

Hi all, I am happy to report that the latest version of MDB plus a few other things resolved our issues with IE11. We used this KeyboardEvent polyfill (https://github.com/BladeRunnerJS/keyboard-event). And we used this code for forEach.

// HANDLER: forEach fix
if ('NodeList' in window && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = function (callback, thisArg) {
thisArg = thisArg || window;
for (var i = 0; i < this.length; i++) {
callback.call(thisArg, this[i], i, this);
}
};
}
// ./HANDLER: forEach fix

We are still looking for a fix for FlexBox issues but that is just cosmetic for us. Hope this helps anyone else looking to get things working in IE11. I wish people switched off of IE11 like yesterday, but I guess folks will keep using it until Microsoft stops supporting it. :-/

 

 


Bartłomiej Malanowski staff pro premium commented 6 years ago

Well, I'm glad you've managed to resolve at least a few of your issues with IE. However, IE is still a nightmare to all of us :/ 


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: Laptop
  • Browser: IE11
  • OS: Windows10
  • Provided sample code: No
  • Provided link: No
Tags