Page MenuHomePhabricator

Loading CSS with mw.loader.load crashes IE
Closed, ResolvedPublic

Description

Adding a CSS file via mw.loader.load causes Internet Explorer (tested: IE 8.0/Win XP) to reload the page telling you a serious problem occured.

To reproduce enter

javascript:void(mw.loader.load('http://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&action=raw&ctype=text/css', 'text/css'))

as adress.


Version: 1.17.x
Severity: major
OS: Windows XP

Details

Reference
bz28413

Related Objects

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:32 PM
bzimport set Reference to bz28413.

Going to javascript:void(mw.loader.load('http://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&action=raw&ctype=text/css','text/css')); doens't do anything weird for me in IE7 and IE9 beta. I don't have IE8 here tho.

I found this bug in jQuery's bug tracker:
http://bugs.jquery.com/ticket/4230

The solution there seems to work:

$( 'head' )
.append( $( '<link />' )

.attr( 'rel', 'stylesheet' )
.attr( 'type', 'text/css' )
.attr( 'href', modules ) )

Well, mediaWiki.loader.load uses..

$( 'head' ).append( $( '<link rel="stylesheet" type="text/css" />' ).attr( 'href', modules ) );

So, are we saying that using some of the attributes in the initial HTML string is the difference between IE crashing or not?

(In reply to comment #3)

Well, mediaWiki.loader.load uses..

$( 'head' ).append( $( '<link rel="stylesheet" type="text/css" />' ).attr(
'href', modules ) );

So, are we saying that using some of the attributes in the initial HTML string
is the difference between IE crashing or not?

Well, not by definition. The difference is that this:

$( '<link />' )

Will cause jQuery's quick regex to pick it up and use document.createElement, whereas anything more complicated makes it append it to a <div> and get the inner child(ren).

http://api.jquery.com/jQuery#jQuery2 states:

  • "When the HTML is more complex than a single tag without attributes [..] the actual creation of the elements is handled by the browser's innerHTML mechanism. In most cases, jQuery creates a new <div> element and sets the innerHTML property of the element to the HTML snippet that was passed in. "
  • "When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided."
  • "To ensure cross-platform compatibility, the snippet must be well-formed."

This was also the cause of a few bugs in the makeCollapsible plugin which used "<span></a></span>" to quickly create a wrapped anchor tag (works fine in WebKit-browsers), but goes bad in (some) IE versions.

I think Internet Explorer wants link-tags to be closed instead of self-closing. Either way, the solution is by using the native createElement function.

In other words (as, in a way, Trevor already said): "[attributes] in the initial HTML string is the difference between IE crashing or not". Yes :-D

Thank you for the excellent input! This is an incredibly easy fix, has anyone verified this actually prevents IE from crashing?

accnospamtom wrote:

I can confirm (as of r86333):

a) loading CSS with mw.loader.load crashes IE 7 & IE 8 (tested in XP)

b) the solution (comment2) works and does not crash IE 7 oder 8

Fixed in r86548.

Used the new method as of jQuery 1.4 to populate attributes instead of chained .attr() calls.

Should fix IE problems and it's slightly faster as well.