Topic: Errors with => function in IE11
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);
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.5.10
- Device: Laptop
- Browser: IE11
- OS: Windows10
- Provided sample code: No
- Provided link: No
Bartłomiej Malanowski staff commented 5 years ago
Could you please try to update MDB to the recent version?
scottwilliams priority commented 5 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 commented 5 years ago
Do you import mdb.js or include only required components?
scottwilliams priority commented 5 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 commented 5 years ago
Yesterday we've released MDB 4.5.16. Do you have the same issue with the recent version?
scottwilliams priority commented 5 years ago
I will check. Did you add some things to that release that would help with IE11?
Bartłomiej Malanowski staff commented 5 years ago
Recently, we've updated our babel config so it should be better now
scottwilliams priority commented 5 years ago
OK thanks. I will see if this helps.
scottwilliams priority commented 5 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 commented 5 years ago
Currently, I don't have any quick workaround in my mind. That's the something we need to work on
scottwilliams priority commented 5 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 commented 5 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
scottwilliams priority commented 5 years ago
Thanks. We will try that out!
scottwilliams priority commented 5 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 commented 5 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 :/