Monday, May 23, 2011

SmartGWT IE7, IE8 Support

Version 4.0.1 of the RHQ project adds IE7 and IE8 support. It took a bit of wrangling to figure out how best to support IE with our spiffy new SmartGWT interface. There are a few parts in play:
  • IE version (7,8,9...).
  • IE Mode (quirks, standards7, standards8, standards9...)
  • SmartGWT version
  • GWT build user.agent values (ie6, ie8)
Our goal is to function with IE7, IE8 and going forward, IE9 and onwards.

One big blocker we ran into is that if you don't quite get things lined up in the build you can get a situation where IE simply will not load. The behavior basically looks like a GET request, usually with high CPU, hanging while waiting for a response for either CSS or JavaScript. Very hard to do much when you hit this.

I'm not going to go into the details too much, here's pretty much the end-game:

Use a recent version of SmartGWT: Version 2.2 or later. We're on 2.4.
This in itself solves an older issue with IE not being able to handle larger chunks of JavaScript. Later versions of SmartGWT chunk the generated JS.

Stick with Quirks Mode: This is recommended by SmartGWT because they already code for the quirks of the browser vendors. That's pretty much what you're getting with your permutations you ask for in the build.

Don't use DOCTYPE in your bootstrap HTML: This is also recommended by SmartGWT because the presence of a DOCTYPE decl will send IE into standards mode for that version of IE. It also affects other vendor's behavior so really, it changes quite a lot. We were initially lured to DOCTYPE because it solved the hanging load issue, but it caused several rendering issues later on.

Do use the meta tag to declare IE7 emulation: This avoids the DOCTYPE problem, will be used by IE8 onwards, and will be ignored by other browser vendors. So basically, if your GUI is working well for IE7 you have a pretty good chance of forward compatibility. It's placed right at the top, just inside the head tag, like this:

<html>
<head>
<meta http-equiv="X-UA-Compatible"
content="IE=EmulateIE7" />
...
</head>
</html>


The content="IE=7" will give you standards mode, which causes other rendering issues as mentioned above. Also, any attempt to use IE8 modes resulted (at least with SmartGWT 2.4) in issues with TreeGrid rendering; unindented child nodes and excessive vertical spacing. This was true even with the SmartGWT showcase. There is definitely an issue between SmartGWT and IE8 for trees.

Use the IE6 GWT user agent: You must include the "ie6" GWT user agent in your build. We're emulating IE7 and that requires the "ie6" userAgent. If you don't include this you will get the hanging loading issue mentioned above.

Tip: Starting with IE8 (I was using IE9) you get a nice feature by hitting the F12 key. This console allows you to easily see and modify the browser mode and standards/quirks mode settings currently in use.

Hope this helps...

1 comment:

priyesh said...

very helpful,

thanks!