Thankfully things are much improved in IE10 and IE11 is downright excellent as a browser.

However, we still need to live with IE9 for now and this little beauty of a bug had me going for way to long.

The scenario is that my client needed a new form to replace an old (and very clunky) one with the caveat that, until we redo the website, it needs to be embedded in an iFrame on an existing Drupal site.

Mmmmm Drupal, now there’s a quality CMS

The site for the form is built with MVC4 and uses Twitter Bootstrap and the Typeahead feature for looking up post codes, suburbs and streets in Australia.

The Natural Choice - Get Connected

All works fine in browsers from IE8+, Firefox, Chrome, Safari when running the site from the a browser (ie. NOT within an iFrame)

However, once it’s popped in the iFrame IE9 all of a sudden stopped working when it came to the Typeahead feature. Arrrrggggggg!!!!

With some testing using the IE9 developer tools I found that switching the Document Mode to Internet Explorer 8 Standards mode fixed the problem. So I went down the path of adding the following meta tag:

Alas putting this at the top of the head of the iFrame had no effect as it was inheriting from the parent page.

I did heaps of reading and came across this article that had this to say:

In order to help deliver on the “same markup” goal, there’s one additional change from IE8 to IE9. All iframes within a top-level page rendering in IE9’s Standards mode will also render in IE9’s Standards mode. The only exception is that iframes that specify Quirks mode will render in Quirks mode.

Interesting and baffling reading. Still not sure if that has anything to do with anything but good to know…I guess???

But I digress, this was all a red herring and not indeed the problem.

On to the Console in the IE9 developer tools and I noticed a javascript error occurring in jQuery 1.9.1. on line 3254. I set the app to debug mode to disable the script combining and compression and popped a break point on that line so I could investigate the call stack and this led me to my app.js file and the line of code that was setting the focus to my first input element.

And what should I find directly below line, the only 2 lines below that line? The code that initialised my Typeahead!

try { $(" #Name").focus(); } catch (err) { //Handle errors here } InitTypeAheadData(" #PostCode", "/Home/PostcodeSearch", 3); InitTypeAheadData(" #Street", "/Home/StreetSearch", 3);

Now I don’t know why this fails for IE9 in an iFrame alone still but popping a try{}catch{} around the offending line has solved my problem.

Problem solved!