Typical pitfalls of cross-browser compatibility

Question

What are the most common browser compatibility issues across the major desktop browsers?

No dups please. Up-vote problems you've run into. I'm hoping for the list to self-sort. "IE sux" is not a pitfall, but a call for down-vote.

[Edit] Yes, I know it's a poll - I'm not posting answers in this to gather points - I'm actually interested in knowing what people typically run into.

Answer 1

Memory management can be an issue - different garbage collectors choke on different types of circular references, although firefox is getting pretty good at cleaning up complex objects properly.

Answer 2

caching, and previous page hashes.

Answer 3

CSS - largely sorted out in the modern browsers, but still an issue - particularly as pertains to layout.

Note that this is not critical - but it is a compatibility issue I almost always end up coming back to when designing a site.

Answer 4

Transparent PNGs in Internet Explorer 6, especially because the common, JavaScript-less workaround of using the AlphaImageLoader can have the side effect of locking up IE6.

Answer 5

I've found that IE 6 has pretty small limits to the allowed stack depth.

At one point I was using a nice recursive function to get the position of an element in the document:

function getOffsetTop (element) {
    var offset = 0;

    if (element.offsetTop)
        offset = offset + element.offsetTop;

    if (element.offsetParent)
        offset = offset + getOffsetTop(element.offsetParent);   

    return offset;
}

Unfortunately when calling this method for elements in a very deep node hierarchy, IE complains of exceeding the maximum stack size (I forget the exact error message). To get around this I needed to use an iterative approach to keep the stack size small:

function getOffsetTop (element) {
    var offset = 0;

    if (element.offsetTop)
        offset = offset + element.offsetTop;

    var parent = element.offsetParent;
    while (parent) {
        if (parent.offsetTop)
            offset = offset + parent.offsetTop;
        parent = parent.offsetParent;
    }

    return offset;
}

Answer 6

When performing an XMLHttpRequest and executing a function 'onreadystatechange' the XMLHttpRequest.responseText property contains the data loaded at that point in Firefox, but not in IE (and maybe Safari).

This prevents the capture of partial data in those browsers for use in displaying an execution progress meter.

Answer 7

Quirksmode has a comprehensive list of a lot of differencies requiring attention !-)

-- but he is, like most other sites and bloggers on the net, focused in his way, and that results in some minor or major bugs and inconsistencies ...

Answer 8

Every fixed width, centered site I've created -- i.e. using 'margin:0 auto' on some containing div to center everything up -- fails to work on IE6 until I test it and apply a 'hack'. This gets me every time.

Answer 9

The most common one I can think of -- and it's been a problem for me twice this week alone -- is IE6 and the box model bug. Look it up!

Specifically, the problem I'm thinking of is when you have floated DIVs which the developer thinks all fit within a wrapper DIV, but they don't in IE6 because they're slightly bigger.

So rather than three columns, you end up with two, and your third is down at the bottom of the screen somewhere -- you want:

   +-------------------------------+
   |+------+ +-----------+ +------+|
   ||      | |           | |      ||
   || foo  | |   bar     | | baz  ||
   ||      | |           | |      ||
   ||      | |           | |      ||
   |+------+ +-----------+ +------+|
   +-------------------------------+

but you get:

   +-------------------------------+
   |+--------+ +------------+      |
   ||        | |            |      |
   ||  foo   | |    bar     |      |
   ||        | |            |      |
   ||        | |            |      |
   |+--------+ +------------+      |
   |+------+                       |
   ||      |                       |
   ||      |                       |
   || baz  |                       |
   ||      |                       |
   ||      |                       |
   |+------+                       |
   +-------------------------------+

Answer 10

I'm a strong believer that if we're going to talk about pitfalls, we should also talk about solutions. This blog post does a great job discussing Three major pitfalls to cross-browser development and the solutions to better compatibility for each.

Problem #1: Cross Browser JavaScript

Solution: Use jQuery

Problem #2: Cross Browser CSS and XHTML

Solution: Write CSS and XHTML against Firefox

Problem #3: Maintaining Standards Mode while Developing

Solution: Test Often and Test Religiously

The article also discusses tools and insights to make you a better cross-browser developer. But, I'll leave you to read up on your own time.

Answer 11

Floats. There are an endless number of float bugs in IE6/7 - Peekabo, guillotine, double margin, escaping floats, 3px gap, duplicate characters, a number of clearing bugs, bugs related to the available space...