Smoothing jagged edges on transformed objects in Firefox

Transformed elements in Firefox sometimes appear with jagged edges. The anti-aliasing isn’t as smooth as what you find in Webkit-based browsers or Internet Explorer (Figure 1).

The good news is that there’s an easy fix for this. It’s essentially the fix used to address the striped border bug in Opera 12.02. Add border: 1px solid transparent to the object. The result looks more like what you see in Figure 2.