Ajaxian

Monday, April 2nd, 2007

OpenLaszlo: How We Deal with Browser Quirks

Category: IE, JavaScript

Max Carlson of OpenLaszlo recently blogged about their approach to dealing with browser incompatibilities:

1. We keep an object that lists each quirk by name, with a boolean value for whether it’s active in the current browser or not…
2. Next, we use some browser detection code to turn specific quirks on or off depending on the browser…
3. Finally, [our code] checks these quirks at runtime.

Here’s an example of their quirks object:

LzSprite.prototype.quirks = {
    fix_clickable: true
    ,fix_ie_background_height: false
    ,fix_ie_clickable: false
    ,ie_alpha_image_loader: false
    ,ie_leak_prevention: false
    ,invisible_parent_image_sizing_fix: false
    ,emulate_flash_font_metrics: true
    ,inner_html_strips_newlines: true
    ,inner_html_no_entity_apos: false
    ,css_hide_canvas_during_init: true
    ,firefox_autocomplete_bug: false
    ,hand_pointer_for_clickable: true
    ,alt_key_sends_control: false
    ,safari_textarea_subtract_scrollbar_height: false
    ,safari_avoid_clip_position_input_text: false
    ,reverse_mouse_wheel: false
    ,no_cursor_colresize: false
    ,safari_visibility_instead_of_display: false
    ,preload_images_only_once: false
    ,absolute_position_accounts_for_offset: false
}

In his list of advantages for this technique, two stand out as particularly interesting:

• Quirks can be cleanly reused when the same issue is discovered across multiple browsers. For example, when I discovered Opera had the same issue as Webkit (images with any parent div whose style.display is set to ‘none’ don’t get valid height and width properties), all I had to do was set the ‘invisible_parent_image_sizing_fix’ quirk to ‘true’ for Opera in the browser detection phase. When this issue is fixed in future browser versions, I can easly turn the quirk back off.
• The rest of the code is much cleaner because the quirks are ’self-documenting’. Compare these two for legibility/maintainability:

  
      if (this.quirks.invisible_parent_image_sizing_fix) {
          ....
      }
  

  vs.

  
      if (browser.name == 'Opera' || (browser.name == 'Safari' && browser.version < 1.5)) {
          ....
      }
  

Max ends his post with a list of the bugs / quirks their team has found in IE7.

Posted by Ben Galbraith at 7:00 am