pelago

This year the Pelago team will be attending the Interactive portion of South by Southwest in Austin, TX. This year will mark the fourth year that we have attended, and we’ve noticed that over the years the Interactive portion has lost much of its technological raison d’être and has become a bit more of a marketing wankfest wrapped up in a celebration of geek culture. Even SXSW itself seems to acknowledge this downward trend.

Granted, as I’ve often said, SXSW is an idea factory, and it really helps you stay abreast of the latest and greatest emerging trends in the tech industry. And if you dig hard enough, it is possible to find truly great panels with amazing speakers with tremendous insight to lend. But if you’re not careful, you might just end up in a panel that quickly devolves into an abyss of marketspeak douchebaggery (last year I was granted the special privilege of hearing from a panelist who was engaged in “hypervising neural networks”).

One of the emerging trends from this year’s panels appears to be games, so to help you make an exciting adventure of the highs and lows of this year’s SXSW Interactive, we’ve put together a list of items to keep an eye out for. Check off as many as you can, and post your results in the comment section of this blog post. The person with the most items checked off will win a free Intervals t-shirt. If you have any items to add to our list, let us know in the comments section.

So here, without further ado:

• Someone very conspicuously using a new iPad2
• Hipster wearing a vest or chunky Ray-Ban sunglasses
• Someone wearing a fedora
• Someone wearing a Threadless t-shirt
• Someone wearing a ThinkGeek t-shirt
• A dude with a HUGE (6+ inches) beard
• Microsoft Silverlight promotional material clinging to its last vestiges of significance
• Someone wearing more than one phone on their belt
• Someone running Ubuntu on their laptop
• A CR-48 Chrome notebook (the Google notebook)
• A laptop with so many stickers, you can’t tell what brand it is
• A 300 pound man using a tiny netbook
• Free beer
• Any mention of the following words from a speaker or panelist:
  • 4chan
  • Wikileaks
  • Libya/Egypt/Tunisia
  • Linux (or any Linux distro)
• Someone taking notes with pen and paper
• An attendee over 40
• Pink fixed gear bicycle
• Violet Blue sighting
• Christopher Poole sighting (keynote doesn’t count)
• A protester or soapbox evangelist carrying a sign

TIEBREAKER: A completely meaningless marketing buzzword/phrase (most syllables wins)

Let the games begin!

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; }