Pixel Gap between browser top bar and mdn top bar

danizier commented 1 year ago

Summary

There is a 1 pixel gap between my browser header and the sticky top-banner. It only happens at 125% and 175% screen scaling. By deleting --top-banner-inner-height from css I could remove the gap. Also by shrinking the screen till the left sidebar disappears the gap also vanishes. I also have tried it in edge and got the same probleme.

URL

Problem is found on all sites.

Reproduction steps

1.Set windows scaling to 125% or 175%.

Scrole through mdn web docs and look at the sticky top bar.
White pixels from text will appear through a one pixel gap.

Expected behavior

No gap

Actual behavior

1 Pixel gap

Device

Desktop

Browser

Chrome

Browser version

Stable

Operating system

Windows

Screenshot

Anything else?

No response

Validations

[X] I have read the Community Participation Guidelines.
[X] I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

danizier commented 1 year ago

You have to open the image to see the gap due to downscaling.

danizier commented 1 year ago

Already fixed by Fix a gap between page's start and header #9041

mdn / yari