codepen.io - Changing the pixel value makes the underline bolder

[nikolay-isakov]

URL: https://codepen.io/nik_is/pen/dymWGMb

Browser / Version: Firefox 102.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items not fully visible
Steps to Reproduce:
1px background underline is not visible or wider than 1px depending used font-size.
Steps to reproduce:

1. Open the codepen page;
2. Take a look at the label - it is not underlined;
3. Change font-size of the body element from 14px to 15px and regenerate the pen;
4. Take a look at the label - it is underlined and width of the line is 1px;
5. Change font-size of the body element from 15px to 16px;
6. Take a look at the label - it is underlined and width of the line like 2px;

If you change font-size to 17px the 1px line returns, 18px - the same, 19px - it is hidden again.

It is expected that the line will not change its width and will not hide.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-raul-bucata]

We appreciate your report. I was able to reproduce the issue. Changing the pixel size makes the underline of the "Input label" bolder:

Tested with:

Browser / Version: Firefox Release 102.0.1 (64-bit)/ Firefox Nightly 104.0a1 (2022-07-20) (64-bit) /Chrome Version Version 103.0.5060.134 (Official Build) (64-bit)
Operating System: Windows 10 PRO x64

Notes:

1. Reproducible regardless of the status of ETP.
2. Reproducible on the latest build of Firefox Nightly and Release.
3. Works as expected using Chrome:
   

Moving this to NeedsDiagnosis for further investigations.

[qa_29/2022]