How does the Meebo bar work so well cross-browser?

Question

The Meebo chat bar is a small, unobtrusive bar (not counting some of the optional popups some sites put within it - the base bar is quite unobtrusive though) that sticks to the bottom of the viewport and is added to the page with only a few lines of JavaScript. Specifically, I'm interested in how they manage to get the "bottom of viewport" positioning to work so well, consistently, and without flickering or other artifacts cross-browser.

Note that the Meebo solution also does NOT require a specific DOCTYPE on the pages, even in IE, so whatever it is they're doing it runs fine in IE Quirks Mode. This is key - what I'm asking about is how to make a bottom-of-viewport toolbar work even without control over the hosting page aside from adding a tag or code that inserts a tag. CSS Fixed alone is NOT an acceptable solution because it does not work properly in IE Quirks mode.

Also, while I am mentioning the Meebo bar as an example, I am not actually looking for a social toolbar, so I can't just use Meebo.

Required browser support - note that Meebo supports all of these: IE6,IE7+,Firefox, Safari, Chrome. Not showing up at all (but not breaking the page at all) is acceptable for IE6, though the preference would of course be for it to (like Meebo) work fine in IE6. Other browsers such as Opera would be nice to haves, but my required browser list is above.

Answer 1

The simple answer is that for quirks mode and IE6, we exploit the power of CSS expressions to calculate the position of the element dynamically. As nwellcome pointed out, we serve targeted CSS files for each browser so we are able to implement this behavior without exploiting */_ bugs or other odd browser targeting hacks.

Furthermore, we exploit an interesting behavior of the IE rendering engine where, if a background property is set on the HTML or Body element, IE will calculate the positioning of fixed elements before redrawing. This cuts down significantly on the flickering behavior that you normally see with JavaScript-based approaches of repositioning the element on scroll / resize.

This site provides a great overview of the solution for implementing position:fixed across all the major browsers: http://www.howtocreate.co.uk/fixedPosition.html

It also references the rather ingenious solution to the flickering issue: http://www.howtocreate.co.uk/emails/LinusSylven.html

Hope this helped!

Answer 2

Looking at that page I see that their default solution is to use position fixed, but then they load a mess of CSS and javascript per the specific browser by constructing the URL for those resources out of pieces of relevant info (browser, version, etc) and writing/appending them as style and script elements in the head element.

When I put IE7 in quirksmode I see that they are continuously re-positioning the div with javascript and on my machine at least the flicker from redrawing is terrible, but this is likely the best one can do and be minimally invasive to the rest of the page. The other quirksmode position fixed workarounds involve setting the element to be absolutely positioned relative to the viewport which messes up absolute positioning for everything else on the page.