How To Deal With IE (Internet Explorer) 11 Render Issues
I develop Drupal websites on Mac, so I usually don't have to deal with IE at all (since I use the excuse that I can't install IE on mac). Lately, I started adding IE testing to my skill set list and have been playing around setting up multiple virtual machines for browser testing. You can read my blog post here on how to setup any IE on mac.
Anyway, recently I ran into a very interesting IE11 problem.
I want to share my finding here and hopefully you can learn from my mistakes.
JS Errors in the Console
IE is always a pain for a web developer. Unless you are a superstar front-end developer, you will always find something odd on an IE rendered page.
Anyway, I got a task for troubleshooting Windows 8.1 and IE11 website layout issues.
First, I check the problem site with WebKit browsers, and they all look good, no JS error.
Then I boot up the virtual machine and fire up the F12 developer tool in IE11.
JS Errors Kept Popping Up
Well, I was dead wrong. I spend couple hours circling around the problem, but no matter what I do, as soon I as fix one JS error, two more pop up.
It was very frustrating.
You know error messages sometimes can point you in the wrong direction. When you look at the problem from another perspective, you might find your answer.
IE Rendering In Compatibility Mode
The real problem is not that the JS breaks the layout, it's IE rendering the working page in the compatibility mode which has very poor CSS and JS support. Why IE11 chose the compatibility mode, I still have not been able to find out. After reading some posts, people were saying IE can misidentify your site as an intranet site, and IE11 will render any intranet site using compatibility mode by default. That was probably the reason why our site was breaking.
Always Check What Engine IE Is Using
Moral of the story: It very important to check the what engine IE is using to render your web page. Without this piece of information, you might end up barking up the wrong tree for hours.
We know modern IE has 2 main engines: Trident, and Spartan, aka the EdgeHTML engine.
Edge is the new shiny engine which supports the web standard, Trident is the old rusty engine which provides the backward compatibility for the legacy sites.
All we have to do is tell IE11 to use Edge instead of Trident, and our site will be render much better.
How To Tell IE to Use Edge Instead of Trident:
Option 1: The best way to force IE to use edge render engine is by sending X-UA-Compatible IE=Edge field in http header respond. (This approach requires you have some drupal programming knowledge.) I already created a simple module to handle that though so all you have to do is, Click here to download.
You can find more http header fields here: http://en.wikipedia.org/wiki/List_of_HTTP_header_fields
Option 2: You can also add a meta tag in your HTML source header section, this approach is simpler, but sometimes gets ignored by the brrowser.
Option 3: You can also use Drupal HTML5 tools to accomplish this.
You can find it over here: https://www.drupal.org/project/html5_tools
Sidenote: IE11 has some big compatibility changes, one of them is removing the MSIE identifier from the user agent string.
The legacy CSS code that gives internet explorer special treatments no longer works. IE11 is actually pretending to be a firefox variation. It identifies itself as "like Gecko" browser. :)
Have no fear though. I have yet another module for you to download for this below.
P.S. DId you know that the Cheeky Monkey Media Drupal Development team is available for hire to white label for other agencies? We can help you and your team. Give us a call!