Bug Tracker

Opened 10 years ago

Closed 10 years ago

Last modified 9 years ago

#8307 closed bug (invalid)

Using $.append() to <link> a stylesheet does not work in IE9

Reported by: JordanClark Owned by: JordanClark
Priority: low Milestone: 1.next
Component: manipulation Version: 1.5
Keywords: Cc: Rick Waldron, snover
Blocked by: Blocking:


Using $.append() to <link> a stylesheet fails in IE9.

#7350 identifies this bug, but it was closed as there was no test case given initially, and no response from the reporter when one was requested.

Here's a link to a test case: http://v7.galaxy-inc.com/developmenttests/csstest/css.html

This test case uses jQ 1.5, but I tested with 1.4.2, 1.4.3, and 1.4.4 with the same results.

This page loads 5 CSS stylesheets. Each stylesheet contains a single rule which applies to a different span.class, and each is loaded with a different method.

All the stylesheets load correctly with FireFox, Chrome and Safari, IE7 and IE8.

Using IE9-RC1 (9.0.8080.16413) stylesheets linked via $.append() are not loaded. In the CSS tab of IE Developer Tools, the affected stylesheets report the error: "This stylesheet cannot be viewed because it's source is in a different domain than the page." Capturing requests from the Network tab shows that they are requested and served properly, but IE is just not using them.

Changing the document mode to IE7 or IE8 resolves the issue.

I can reduce this test case further if deemed necessary, but I found it useful to see examples of what does work alongside what doesn't.

Change History (8)

comment:1 Changed 10 years ago by Cameron Cooke <web@…>

I can verify this issue.

While debugging why my webapp's stylesheet was not being loaded in IE9 I discovered this messsage in IE9's developer tools console:

"This stylesheet cannot be viewed because its source is in a different domain than the page"

The stylesheet that IE9 refuses to load is created using this method:

$('<link rel="stylesheet" type="text/css" href="styles.css" />').appendTo('head');

I can confirm that the stylesheet in indeed in the same domain as the page.

comment:2 Changed 10 years ago by jitter

Component: unfiledmanipulation
Owner: set to JordanClark
Priority: undecidedlow
Status: newpending

Thanks for taking the time to contribute to the jQuery project by writing a bug report.

After checking your report and test site I can't fully reproduce what your are claiming. Your page does indeed work in FF, Chrome and Opera. But when opening the site with IE 6/7/8 all fail the two $.append() tests (IE6 randomly also fails the $.html() test).

I suspect this may have to do with the fact that your test page doesn't provide any DOCTYPE (!!!), which puts any browser into quirks-mode. The X-UA-Compatible meta-tag you added does alleviate the missing DOCTYPE to some extend for IE but the combination might still be the cause for your problems. So please try either removing the meta-tag and thus putting IE also in quirks-mode or better add a valid DOCTYPE declaration.

Also with my test case which is fully valid html I don't have any failures in IE 6/7/8. I sadly can't test with IE9 but I guess it would also work with IE9.

So please try my test case with IE9RC and report your findings.

How to report bugs

comment:3 Changed 10 years ago by JordanClark

Status: pendingnew

Oops, oversight on my part in forgetting the DOCTYPE.

I added a DOCTYPE to the test page, and I'm still seeing the same issue in IE9.

I can confirm that when using IE7/8, rather than merely changing the document mode in IE9, both $.append() cases fail. But, switching to use 1.4.4, rather than 1.5, both browser pass. (I created a new test page using 1.4.4, http://v7.galaxy-inc.com/developmenttests/csstest/css144.html) Strangely not seeing any failures with your fiddle, which looks all but identical to my test page(s).

Unfortunately, I cannot test your fiddle in IE9 either. jsFiddle seems to be having it's own IE9 problems; All of the iframes have 0-height and can't be re-sized, which is why I didn't use it for my original test case.

Let me know if I can do anything else to help here.

comment:4 Changed 10 years ago by jitter

Cc: Rick Waldron snover added
Status: newpending

You can open my test case in "non-code" view: http://jsfiddle.net/jitter/ZURqw/show

Only difference should be that my test case has no meta-tag for the X-UA-Compatible stuff.

Last edited 10 years ago by jitter (previous) (diff)

comment:5 Changed 10 years ago by snover

jitter’s testcase worksforme in IE9. The original does not, but it seems to probably be not a bug in jQuery if it works at all.

comment:6 Changed 10 years ago by JordanClark

Status: pendingnew

Opening jitters test in non-code view worked for me in IE9-RC1.

I removed the meta X-UA-Compatible tag from my original test case, with no effect.

The only other difference between the two was that you were using the full URL for the stylesheets, whereas I was relying on the relative path.

Changing my $.append() <link>s to use the full URL fixed the problem.

While this doesn't seem like a true bug in jQuery, I finds it interesting that using appendChild() does not have this limitation, but using $.append() does.

comment:7 Changed 10 years ago by snover

Resolution: invalid
Status: newclosed

IE irritatingly munges hrefs in innerHTML strings (forcing relative to absolute). There’s no way to work around this but it sounds like it is the source of your problem.

comment:8 Changed 10 years ago by manciaux

i have the same problem. It works in jsFiddle because the href's are full urls. It fails if I take the same example on my machine and try to use relative urls in the <link href's>.

Note: See TracTickets for help on using tickets.