Skull Jackpot

Various thoughts of minimal interest to others

Lessons from a white whale

December 18, 2008

I enjoy squashing renderbugs.

I don’t always enjoy the midway point, when a misrendering issue stubbornly refuses to yield to my ministrations, but that “Eureka” moment where I manage to tease out what’s going on under the hood and come up with a solution – that’s gold.

As a result of the fact that Internet Explorer generally has the most rendering issues, I’ve gotten to be good pals with IE, in it’s various incarnations. When presented with a new renderbug, I sometimes feel like a sitcom parent catching a child with their hand in the cookie jar. “Oh IE you goofball, what mischief have you gotten into this time…”

I know, I know. I should get out more. Bear with me.

Roughly two months after the new Livable Streets site launched, one of my co-workers reported a renderbug where the sidebar was one pixel out of place. After doing some detective work, I discovered that this issue was exceptional in two respects:

  1. It only showed up on Firefox 3. Earlier versions of Firefox were unaffected, as were Safari, Opera, and Internet Explorer (even IE 6).
  2. It only showed up at certain horizontal resolutions. If you slowly resized the browser window in Firefox 3, you could watch the sidebar pop in and out of position.

Based on the now-you-see-it, now-you-don’t behavior of the renderbug during viewport resize, I was pretty sure this had to be a rounding bug of some variety. When I dug into the CSS, I found that every element that could conceivably play a causal role had width, padding, and margin set in absolute pixel values.

I created and discarded a bunch of different solutions. Everything I came up with was either extremely fragile, or triggered worse misrenders. All my test cases failed to isolate the problem, or point in the direction of a viable fix. I inspected elements using the great Web Developer extension. I added javascript to alert with element widths. At every step of the way, all elements reported the correct widths, yet I could trigger the bug at will by having an appropriately-sized browser window.

I began to jokingly refer to this renderbug as my “white whale”.

After a couple days of focused effort, with other projects starting to pile up, it became time to move on. I made a commit which fixed the worst symptoms of the misrender, but the underlying problem remained. I wasn’t happy about leaving the white whale out there, but couldn’t justify pushing off other front-burner issues to fix a one-pixel offset which affected a single browser, only at certain resolutions.

Fast-forward to last week. The market share for Firefox 3 has continued to climb. The design team has a bit of breathing room, and the white whale is once again in my sights. This time, though, I was able to identify the problem, and come up with a viable fix.

My initial reaction that this had to be a rounding error was correct, although I was looking in the wrong place by assuming the elements were being sized incorrectly. It turns out the the algorithms Firefox 3 uses for centering background images, can return different values from the ones used for centering contained elements. So, although all the elements on the page were sized in absolute pixels, the entire content area was being misaligned compared to the background-image (the background is centered on an element which is the full width of the viewport, so that at smaller browser sizes the dropshadow disappears and the content sits flush against the left side).

I created a test case demonstrating the issue, and went to post it to bugzilla, where I found multiple other users had already reported the problem. When I sat down to finish up this post, I found that the problem has already been fixed in the nightly builds, and should make it into production with Firefox 3.1.

Hooray for Open Source.

Leave a comment

HTML - You can use:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>