Chrome 1px border changes depending on window height

Question

I've encountered a really strange bug that exists in Chrome only. I've got a list of links with the equivalent of a 1px border-bottom (I'm using Compass Vertical Rhythm to output borders). In the inspector, it says that the border width is 1px, but the border displayed is more like 2px and lighter than the font colour (see image).

If I reduce the height of the window (either by making the browser shorter or opening the inspector) the border goes back to what it should be. I've tried setting the border-width manually as 1px rather than relying on Compass Vertical Rhythm to no avail, so I think it's more of an issue with Chrome.

Here is the code

a {
    @include trailing-border(1px, 0);
}

And here is the output in Styles

border-bottom-width: 0.05556em;

Here is the output in Computed

border-bottom-width: 1px;

Has anyone encountered this before? Any solutions?

Answer 1

Apologies for the necro post. But this is the closest post I can find to the problem I am experiencing so thought I would add it here. I am confident this is a bug with chrome though I don't know enough about the border collapse bug that chrome has to be certain that that specifically is the issue..

https://www.ablueman.co.uk/the/testbench/divt.php

Shows correctly in Ie and firefox (see div table widths / heights at the bottom of the page) But in chrome it seems to screw up the border sizes which adds a less than one pixel value.

i.e. DIV (Width:518.3333332538605px, Height: 22.33333325386048px)

If you turn off the borders, issue disapears.