What happens when you add a shiny new browser to a stack of already-disagreeing citizens? You’ll inevitably find some bugs. This is the story of how we found a rendering quirk and how the Atlassian frontend team found and refined the fix. The Problem The Atlassian User Interface (AUI) library has just finished an IE10 sprint to get our library prepped and ready for the newest member of the browser family. While IE10 seems generally quite good, we found a couple of problems due to IE10 dropping conditional comments; plus some undesirable behaviours. The most curious of these was IE10 rendering white dots in the corner of AUI buttons: Jonathan Poh, a frontend developer for Stash, initially suggested this fix: background-clip: border-box …as it solves a similar-looking problem on elements with rounded corners. However this fix didn’t work on the buttons, as it wasn’t a background image extending past the borders of the element – in fact it seemed to be the opposite. For some reason IE10 wasn’t rendering enough pixels for the gradient to cover the whole element. After playing around with different values of border radius, gradient colours, padding, border-width and others we came to these conclusions: This only occurs at a border radius of 3px This only occurs when you place a linear gradient as the background The bug can only be observed at 100% browser zoom (if you bump up the font-size in the browser you can’t see it) The dots aren’t actually white, they’re missing pixels (transparent) that aren’t being rendered by the gradient function. A Solution Since it was such a specific bug that was only visible at normal zoom we concluded it was a problem with the rendering algorithm. We decided to raise a bug in Microsoft’s feedback program for IE10, as well as looking for an immediate fix. Later that day in a discussion with Ben Buchanan, another AUI developer, we had a brainwave: if the white dots were indeed caused by the algorithm then maybe we could trick it into rounding the way we want it to. What if we gave it a slightly bigger number so that it rounds to a point where it actually renders those missing 4 pixels? Enter the 3.1px fix. We changed the border radius on our buttons to: border-radius: 3.1px; and voila! No more white dots, with a border radius that is still rendered as 3px in all browsers. Really? What’s interesting here is that if you compare the border radius of 3px and 3.1px in the different browsers you get the following results: Firefox: No difference Chrome: No difference Safari: No difference IE9: Slightly transparent corner pixels IE10: Slightly transparent corner pixels (more noticeable than IE9) Out of curiosity we compared several different sub-pixel values in IE10 (note these boxes all have gradients of #000 to #000): The slightly transparent pixels gives the rounded edges a very subtle blur that you can’t really see at normal zoom. Refining to the 3.01 fix After finding this fix, we mentioned [...]
Previous Topic
