What’s the weirdest bug you’ve ever had to fix? Share your stories!
Back in the day, I worked on a web application that had to support IE6 for some unknown purpose. On IE6, there was one page that caused me no end of grief—it contained a table with a row of icons indicating the status of various processes, and each icon was an SVG styled by CSS. I’d recently joined the team and had completed all my stories for the sprint, so I picked up the performance issue from the backlog, thinking it’d be a nice way to spend a little time - and help those poor corporate clients who were stuck on IE6 get a little time back in their day… It was only worth two story points, but it took much longer. I should’ve known it wasn’t as simple as I’d hoped, as it seemed every developer on the team had had a go at solving it.
To cut a long story short, I tried everything and learned an awful lot. The issue was caused by inline stylesheets in the CSS - which weren’t used in any case - what was happening was that the browser parsed the external CSS file and then started chunking its way through the markup. Every time it hit an SVG, it parsed the XML, found the CSS and had to recalculate the CSS Object Model. There were about sixty rows in the table, each containing five SVGs; all the recalculation and duplication of CSS classes in the SVG caused a two-minute delay on a simple dashboard.
It was simply a matter of removing the inline CSS from the SVG images, and performance went right back up—but it took a whole sprint, which led to an interesting discussion about velocity at the retrospective. A few months later, we stopped supporting IE6, so it was a moot point. I’ve since been much more careful about using SVGs!