I'm using an em-based margin for homogeneous (in terms of markup, class, id, etc.) items in a menu. As far as I can tell, the margins for each of these items should be rendered identically. However, some are being rendered as 1px, and some as 2px. There may be some pattern to this (e.g. every second item is rendered as 2px), but not that I can discern.
I've observed this behavior in both Firefox and Chrome, on Linux and OS X.
I'm guessing this is due to the calculated value of each these margins being a decimal number (1.6px according to chrome devtools), but why isn't the same decimal number being rendered consistently?
There's a codepen example below, and I'm also including an enlargement of a screenshot demonstrating the issue.