1529519 - Inaccurate rendering of element border height on high dpi displays

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[C. Martin]

Attachment: Firefox li with border normal dpi height.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0

Steps to reproduce:

I have list items with this style:

line-height: 20px;
height: 20px;
padding: 5px;
border-bottom: 1px solid orange;

Resulting in an absolute height of 31px

Actual results:

On a normal dpi display these render correctly with 31px (see screenshot)
On a high dpi display these render as 30.66667px (see screenshots)

However if I remove the border and set height/line-height to 21px I get exactly 31px!

Since I'm trying to align a second column with translateY offset this drives me nuts! It's impossible. Chrome manages to do exactly 31px and thus has not problems aligning the 2nd column correctly.

Expected results:

The height should be exactly 31px on a high dpi diplay as well. Just as in Chrome!

I've run into the alignment issue several times before, but only today I realized that it only happens when using borders.

Comment 1

[C. Martin]

Attachment: Firefox li with border high dpi height.png

Comment 2

[C. Martin]

Attachment: Firefox high dpi offset.png

Comment 3

[C. Martin]

Attachment: Firefox high dpi no border no offset.png

Comment 4

[C. Martin]

Attachment: Chrome high dpi no offset.png

Comment 5

[C. Martin]

Attachment: Firefox different rendering of 1px element on high dpi.png

To make matters worse: I tried to work around the alignment issue by placing a 1px element at the bottom of each li element; look at the screenshot how inconsistently its height is rendered on a high dpi screen.