Live extensions breaks in legacy IE

[ghost]

Error message: Unable to get property 'split' of undefined or null reference Line: 1686.

This happen because there is no transition or animation support in IE9.

Tried a workaround, but then better DOM throws new errors.

Line 1669. Return null.

Error now occur on line 84, and screaming "Syntax error"

I worked around this in IE Developer Tools when I started the script again. It was then working, but only toggling possible on the first buttons.

The .HTC file are not helping here either.

I modified the code a little more, so it do the mutations when I click on that button. But it will not toggle when I click on the newly created buttons.

This is working perfectly in all other browsers and IE10 and newer. But not in IE8 and IE9.

Seems to me that both the visibility methods get broken, and live extension. It also seems not to import any CSS style rules in the live extension.

Strange is it that the non-duplicate button have toggle and can do toggle without a issue. It's only the duplicated buttons that you can't toggle.

I used IE11 in IE9 compatibility mode when I got this errors.

Code that I used to get the errors:

<button class="clazz" >Toggle</button> 
<button id="duplicate"> Duplicate</button> 
<script type="text/javascript">
DOM.extend(".clazz", { 
  constructor: function() {
        this.on('click', function() {
           DOM.find('.modal-dlg').toggle(function(target) {
            target.css('backgroundColor', 'green');
          });
   });
}
});
DOM.extend(".modal-dlg", {
  constructor: function() {
  },
    demo: function() {
       DOM.find('body').append(DOM.create('<button class="clazz"> Demo!!</button>'));
    }
});
    var signinForm = DOM.find(".modal-dlg");
  DOM.find("#duplicate").on("click", function() { 
  signinForm.demo(); // => shows the signin dialog
});

</script>

[chemerisuk]

@marcorra you are using the latest version, right? Also, make sure you've read https://github.com/chemerisuk/better-dom#notes-about-old-ies

[ghost]

@chemerisuk I did read and know about the .HTC file I need to attach. I investigated further, and it seems only to happen in the compatiblity mode in IE11 - some versions. I couldn't find info directly about issues like this online (.HTC issues), but I found other issues with IE11 and compatibility mode. Chakra JIT bug. https://github.com/jashkenas/underscore/issues/1621

But that has nothing to do with this case. I choose to belive so at least.

Anyway. I can also note that the hide() and show() methods behave strange.

But in native IE9 - I installed it virtually - everything works just fine.

[chemerisuk]

@marcorra ah, compatibility mode... Well, it's not supported officially at present. Everywhere I'd recommend to use X-UA-Compatible for IE that forces not to use the compatibility mode. Can you do it in your case?

[ghost]

@chemerisuk I can give it a try. I also note that I was using IE11 on Windows 10 Technical Preview Build 9926, so that could maybe triggered the problem too? I also got my hand in the latest build 10009 (only in China) with Spartan, and tried there. Was not working at all on Spartan - with or without .HTC file for now.

Anyways. I will give it a try. But isn't there possible to fix it so there is no need for .HTC for legacy IE?

[chemerisuk]

@marcorra the only problem is compatibility mode I think. You just need to disable it.

I tried many times to get rid of HTC in live extensions, but without success. Anyway those ancient browsers will die sooner or later...

[ghost]

@chemerisuk I tried what you suggested and works great in native IE9!! Only strange thing now is your CSS animation examples. I tried this one: http://jsfiddle.net/C3WeM/5/ as one example.

Animation is not working, just blinking all the time. Nothing to do with the reported issue - I know - but just to let you know.

Anyways! A great library this one. Small, and over all good performance! Great job!!

[chemerisuk]

@marcorra glad it was helpful. I suggest always to add that meta for IE to decrease amount of headache.

True, animations won't work in IE8-9, because I use declarative approach and native CSS3 capabilities. Therefore those dinosaurs just blink instead. It's a bit boring... but only for old IE users :)