I'm using 'CSS triangles' (different border sizes/colours on a pseudo-element) to give an arrow-like appearance to elements on a webpage. I size everything using relative units, so that things scale as they should when the user agent stylesheet has a non-default font size.

All works well, except that in Chrome (currently using version 23) when I zoom in and out, the border size seems to be calculated incorrectly -- the border grows/shrinks much faster than the rest of the elements.

Other Webkit browsers (i.e., Safari) don't exhibit this behaviour, and even IE8 doesn't have trouble.

UPDATE: I've managed to simplify the case; it has nothing to do with pseudo-elements and everything to do with the way Chrome calculates border-width with relative units. Here's an example; when you zoom in and out, the two elements stop being the same height: