XPages Tip: Fixing a Few Problems Caused by IE Compatibility Mode

I recently worked on a project that was required to support IE8 and IE9 (along another more competent browser). However, when it was deployed, it rendered in compatibility mode (per the corporate standard configuration), which really caused it to act like IE7. In this post, I’ll describe a few specific issues that we found with compatibility mode and how we worked around them.

First Attempt

The first thing we tried was this great XSnippet to change the response header to try to force the browser out of compatibility. I’ve seen it work in tests, but it didn’t work in this client environment, so we had to work around the most important side effects that compatibility mode caused.

Application Layout

Problem: Using the standard application layout control, some views (the content section of the layout) would display below the navigation menu, rather than to the right of it, but only in IE with compatibility mode enabled.

Workaround: To fix this problem, ran code onClientLoad to check the browser and version on the affected pages and shrink the width the content area slightly, which fixed the problem. (Credit to Wil How for this solution.)

Date Pickers

Problem: The strangest side effect that we saw was that clicking on any date picker caused a form submission and full page refresh.

Workaround: We changed all of the date pickers in the application (i.e. standard inputText fields with the date picker added) to Dojo Date Text Box controls in order to avoid this behavior.

Font Awesome

Problem: Font Awesome icons did not render in compatibility mode. Font Awesome actually comes with IE7-specific style sheets, but they didn’t work in compatibility mode, either.

Workaround: From what I’ve read, it appears that the problem lies in the length of the url used to define the font. As it turns out, adding a hash (#) in the url allows older versions of IE to process longer URLs. The fix was to add #iefix into the second source line in the font declaration in the font-awesome style sheet, as shown below.

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.2.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') [...More font definitions here]
  font-weight: normal;
  font-style: normal;
}

array.indexof()

Problem: This problem appeared to be that a dojo progress bar dijit didn’t work in compatibility mode, but I tested it separately and it worked fine. As it turned out, it was failing where code tried to use array.indexOf() (only in compatibility mode) as it was building the data to update the progress bar.

Workaround: Replaced the convenient array.indexOf() calls with code to actually walk through an array and check whether any of the values match.

Got Tips?

I’m sure there are many, many more issues causes by compatibility mode in your applications. Got any tips or links to share?

Advertisements

4 responses to “XPages Tip: Fixing a Few Problems Caused by IE Compatibility Mode”

  1. Per Henrik Lausten (@perlausten) says :

    In cases where it is possible to put IE out of comp. mode, you can use this snippet of code to display a warning message to the user, if IE is in comp. mode: http://openntf.org/XSnippets.nsf/snippet.xsp?id=display-warning-message-if-internet-explorer-uses-compatibility-view-mode

  2. Ozlem says :

    Hi Brad,
    Thanks for all the info !!

    I am trying to apply the following fix on our project now. Do you have any code sample for shrinking the width of content area? Thanks in advance.

    —Details about the fix below—

    Application Layout

    Problem: Using the standard application layout control, some views (the content section of the layout) would display below the navigation menu, rather than to the right of it, but only in IE with compatibility mode enabled.

    Workaround: To fix this problem, ran code onClientLoad to check the browser and version on the affected pages and shrink the width the content area slightly, which fixed the problem. (Credit to Wil How for this solution.)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: