Not sure when this started happening, but at some point, Chrome on non-retina screens would round fractional border widths in such a way that would cause the border to no longer be equal width all around:
We were specifying a border width of 1.5px -- possibly to dial in an exact desired width on Retina (or other high-pixel-density screens) but this is no longer gracefully degrading on normal monitors.
I recommend rounding up to 2px. This means the border width is still more or less the same on normal monitors but the circles are now evenly balanced:
Note that Firefox rounded down to 1px, instead of up to 2px. By making this fix, we are more consistent across browser experiences.
In addition, I've made some code style fixes to avatar.scss.
Not sure when this started happening, but at some point, Chrome on non-retina screens would round fractional border widths in such a way that would cause the border to no longer be equal width all around:
We were specifying a border width of
1.5px-- possibly to dial in an exact desired width on Retina (or other high-pixel-density screens) but this is no longer gracefully degrading on normal monitors.I recommend rounding up to 2px. This means the border width is still more or less the same on normal monitors but the circles are now evenly balanced:
Note that Firefox rounded down to 1px, instead of up to 2px. By making this fix, we are more consistent across browser experiences.
In addition, I've made some code style fixes to
avatar.scss.