Two weeks ago, I wrote:
I woke up today to a very annoying new bug in Firefox. The browser shits the bed in an unpredictable fashion when rounding up single pixel line widths in SVG. That’s quite a problem on The Session where all the sheet music is rendered in SVG. Those thin lines in sheet music are kind of important.
In this situation, when the problem is caused by a browser bug, the correct course of action is to file a bug with the browser. That had already been done. Now all I could do was twiddle my thumbs and wait for the next release of the browser, which would hopefully ship with the fix.
But I figured I may as well try to find a temporary workaround in the meantime.
But then I stopped and thought, “If the problem is with the rendering of the SVG, maybe CSS can help.”
I started messing around with SVG-specific CSS properties like
fill, and so on. With dev tools open, I started targeting the
paths that acted as bar lines in the sheet music, playing around with widths, opacities, and fills.
It was the debugging equivalent of throwing spaghetti at the wall. Remarkably, it actually worked.
I found a solution with this nonsensical bit of CSS:
stroke: currentColor; stroke-opacity: 0;
For some reason, rather than making all the barlines disappear, this ensured they were visible.
It’s the worst kind of hacky fix—the kind where you have no idea why it works, but it does.
So I shipped it.
And at pretty much exactly the same time, a new version of Firefox dropped …with the bug fixed.
I can’t deny that there was a certain satisfaction in being able to work around a browser bug. But there’s much more satisfaction in deleting the hacky workaround when it’s no longer needed.