IE9 - Conditionals on the HTML tag break X-UA-Compatible meta tag

[tklun]

While using IE9, it appears that having all of the boilerplate's conditionals on the HTML tag prevent the X-UA-Compatible meta tag from working properly.

To fix some javascript and rendering issues that only occur in IE9, I tried to force IE9 to use IE8 mode with the following tag:
< meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" / >

Despite being in the markup correctly, IE9 ignores the tag. However, I was able to get IE9 to render in IE8 mode by removing all the conditionals surrounding the HTML tag. As much as I dislike forcing IE8, until some issues are resolved (ie. jQuery breaking in IE9) forcing IE8 mode seems like a necessary evil.

[nimbupani]

Do you have an example page you can link to? And can you elaborate what you mean by "working properly"?

[tklun]

I actually don't have an example live currently, but if it's helpful I could work something up.

If you have the above meta tag in your head and open any page in IE8 with IE's Developer Tools open, you'll notice that Document Mode should say "IE8 Standards". That same Document Mode should also be forced when opening a page with that meta tag in IE9.

The issue is that IE9 incorrectly uses its default "IE9 Standards" mode when there are the comments around the html tag.

[nimbupani]

Ah, I see. This would need more investigation!

[paulirish]

tklun, can you detail what the problems are you're having with IE9's standards mode?

[paulirish]

so basically..
you want to force ie9 to use ie8's engine.

but boilerplate's comment setup makes that hard.

can you verify this is the case? we'll document it.

[evocateur]

I can confirm this happens in IE9. In fact, any conditional comment (even an empty one) above the X-UA-Compatible <meta> causes IE9 to lapse into IE9 Standards Mode, regardless of the value passed in X-UA-Compatible.

I would love to let it mimic the "Edge" directive, but gargantuan sites with limited test resources and years of legacy hacks sadly make "EmulateIE7" the most expedient option.

[tklun]

Evocateur, thanks for taking the time to confirm this.

I ran into this issue as jQuery doesn't seem to work correctly IE9 standards mode; falling back to IE8 standards mode seems to resolve this issue.

[paulirish]

tklun, what were the jQuery issues you found?
i'd love to get some tickets filed to address those.

[tklun]

The jQuery issues are a problem with IE9 itself, not the HTML5 Boilerplate. I think that some of those issues have already been filed, but I can give you examples if you want. Sorry if that was confusing.

[nimbupani]

From what I checked, IE9 seems to render only in Standards mode (at least the latest preview), irrespective of the compatibility mode you set with or without conditionals.

[paulirish]

It's a side effect we'll have to document, but I don't think we'll change the CC position now.

TODO: document CC (on html) effect on IE documentMode

[tklun]

Nimbupani, thanks for the information about compatibility mode support.

I was actually able to work around this issue, but not in the most straightforward way. Using server-side user-agent sniffing and .NET placeholders, I was able to use the boilerplate conditional comments with all browsers other than IE9.

With IE9, I'm using the EmulateIE8 meta tag without any conditional comments. Using this approach, IE9 is able to render correctly in IE8 Standards mode. It seems like the conditional comments are indeed the culprit. This may not be the most elegant solution, but it's a decent workaround until IE9 is developed further.

It will be interesting to see if later versions of IE9 will support the boilerplate's conditional comments. Thanks for everyone's input on this issue.

[nimbupani]

tklun, I am going to close this, as it seems like a niche issue rather than a general problem with boilerplate.

[tklun]

This isn't a niche issue. Boilerplate conditional comments flat out don't work with IE9 in all the different document modes on the HTML tag as they currently are. This could be a big issue when IE9 comes out.

[nimbupani]

tklun, from this discussion we have established that EmulateIE8 mode does not get triggered when the conditional comments are on HTML tag.

I do not understand what you mean by "flat out doesn't work". Has anything changed since?

[tklun]

Yeah, I mistyped. I didn't mean to come off as too alarmist.

My point is only that while issues with different document modes may not be a large issue now, it could prove to be a problem if they persist when IE9 comes out of Beta.

I agree this isn't a high priority, but I think it's still worth documenting.

[paulirish]

Indeed. having emulateie7-8 not working is indeed a bummer... but i think there are HUGE advantages to developers opting into the ie9 mode so i don't mind shipping this flaw.
we'll document it fo sho

[nimbupani]

Documented here, tklun! https://github.com/paulirish/html5-boilerplate/wiki/FAQs Thanks!

[tklun]

Perfect, thanks!

[kingluddite]

I just had to remove the IE conditionals because 2 out of 10 people couldn't see my site. All they saw was a blank page. One person couldn't see the page in IE8 on XP either. Once I removed the conditionals at bhs.kingluddite.com, the page was seen by all. Looks like this could be a major bug for IE 9

[evocateur]

Given that it's a WordPress site, it's entirely likely that WP is to blame for mangling the conditional comments. We use the boilerplate IE comments after the doctype (with some added xmlns junk for facebook etc) at http://www.zillow.com/ with no ill effects for IE. (I ended up bulling through a switch to our X-UA-Compatible flag to always be edge, thereby avoiding the initial bug)

[paulirish]

fwiw facebook now has an HTML5 friendly embed that lets you bypass that xmlns junk.

http://developers.facebook.com/docs/reference/plugins/like/

[wooki]

Guys, this is still a problem - I ran into this and investigated a little further...

Any use of conditional comments before the X-UA-Compatible meta tag will cause the X-UA-Compatible meta tag to be ignored by IE. Thus the CC (there for the benefit of IE) around the html are simply not compatible with the X-UA-Compatible meta tag (there for the benefit of IE).

It would seem that including both in a template is to ignore the fact that it doesn't work. I think either a new method of dealing with indicating which browser you are in (i.e. replace the CC's) or removing the X-UA-Compatible meta tag would be the only option.

Does anyone know if setting the X-UA-Compatible in the htaccess allows the CC's to work - I would presume that it would but haven't tested.

[necolas]

Please discuss this in #1187 and provide some detail on what "doesn't work" actually means. Expect result, actual result, etc. Thanks a lot.