pelago

AKA the images with negative margins problem.

Prior to our most recent update of Intervals we started to get bug reports from customers telling us that when they tried to view certain tasks, certain parts of the page would be blank. The reports ranged from the task summary being blank, up to nearly the entire page being blank. The only common thread to all these reports was that the users were using Chrome 9, which had just been released. It wasn’t appearing on any other pages, just the task view page. Here is how the page is supposed to look, as viewed in Firefox (you are looking at a development version of Intervals, so I apologize for all the weirdness):

And for contrast, here’s what the page looked like in Chrome:

As you can see, with the exception of the footer, the page was essentially blank. Using Chrome’s developer tools I dove into the DOM tree and tried to figure out what I could. For the most part, Chrome was calculating element positions correctly.

Something had to be throwing them off wildly, and that was indeed the case. A particular element was being calculated with a height of -214748328 pixels. As some of you may already know, that particular number is telling because it’s the minimum number that can be expressed in the signed 32 bit integer range. Chrome was, for all intents and purposes, calculating this element’s height as negative infinity.

A bit of further digging revealed the cause. The element in question contained an image with a height of 1 pixel and a margin (imposed by the stylesheet) of -1px -3px -2px -3px.

Essentially, the negative margin on the images threw off computation of the element’s dimensions to an unacceptable level and affecting all the surrounding elements. Removing the image solved the problem. Unfortunately, this particular block of HTML came from the customer. In fact, it came from an Outlook email client, was pulled in from their email account, and was created as a task. In this case, this particular image was used for email tracking (most of the time you don’t even notice these in the emails you read, but they’re quite common).

The solution in our case was to remove the negative margins being applied to these images from the stylesheet. It fixed the problem in this case. Incidentally, we ran into similar issues with images lacking a src attribute. We fixed that by adding the following line to our CSS file:

img:not([src]) { display: none; }

March 3rd, 2011 | by Cameron

You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.