In IE11, prepend fails in popup when containing multiples elements

[jbdemonte@…]

"prepend" fails in IE 11 when generating dynamic content to a popup in a detached element while "append" works fine

Here is a demo: ​http://demonte.fr/test_popup_ie/

Works fine in: IE9, Firefox, Safari, Opera and Chrome

In IE11, "append" simply stop the script without rising any error.

[anonymous]

Oops, in IE11, it's "prepend" which fails, not "append"

[dmethvin]

Very strange, if you're in the IE debugger it just halts with an "empty error message" inside domManip but it's not even in the same place each time. I don't see anything wrong in the inputs.

Not much we can do here without knowing the actual problem, I've reported it to Microsoft and can reopen if they suggest a workaround.

[jbdemonte@…]

Replying to dmethvin:

The only workaround I see right now is to wrap the elements set into a div (or another tag) before prepending it.

Where did you report it to microsoft? can you provide the url?

[dmethvin]

I reported it to our contacts there with a link to this ticket. You could also create a ticket at ​http://connect.microsoft.com and link it here if you have more info.

[jbdemonte@…]

Here is a quick workaround I'm going to use:

      (function ($) {
          // if not IE 11
          if (!navigator.userAgent.match(/Trident.*rv[ :]*11\./)) {
              return;
          }

          var prepend = $.fn.prepend;

          $.fn.prepend = function () {
              var args = Array.prototype.slice.call(arguments),
                  self = this;
              $.each(args.reverse(), function (index, elts) {
                  elts = typeof elts === "string" ? $(elts, self[0].ownerDocument) : $(elts);
                  $(elts.get().reverse()).each(function () {
                      prepend.call(self, this);
                  })
              });
              return this;
          }
      }(jQuery));

Limitation:

• it works for classic string nodes (e.g., "<span>...</span>") and html node (e.g., prepend($("div")) and does not support flat text (e.g., .prepend("ok"))
• does not works with function as param (.prepend( function(index, html) )

I closed it to IE11 because I have not tested IE10 yet (IE9 works fine)

Demo: ​http://demonte.fr/test_popup_ie/workaround.html

[jbdemonte@…]

Note: the problem is also present in IE 10

I've updated my snippet to handle IE 10

      (function ($) {
          var prepend = $.fn.prepend,
              ie11 = !!navigator.userAgent.match(/Trident.*rv[ :]*11\./),
              ie10 = !ie11 && !!navigator.userAgent.match(/MSIE\s10/);

          if (!ie10 && !ie11) {
              return;
          }

          $.fn.prepend = function () {
              var args = Array.prototype.slice.call(arguments),
                  self = this;
              $.each(args.reverse(), function (index, elts) {
                  elts = typeof elts === "string" ? $(elts, self[0].ownerDocument) : $(elts);
                  $(elts.get().reverse()).each(function () {
                      prepend.call(self, this);
                  })
              });
              return this;
          }
      }(jQuery));