fix(layout): avoid sticky header gap

[OnkarRuikar]

Summary

Depending on the zoom level, the sticky-header-container leaves a 1px gap on the top.

Problem

Refer to the following video:

stiky_header_1px_gap.mp4

Note that the viewport's top border has white dots.

Make sure you have the dark theme on. If you can not reproduce it, change the browser zoom level slightly and scroll so that some text reaches the top border of the viewport. Keep changing zoom till you see the gap. I can reproduce this in Firefox and Chrome.

Solution

This is due to some zoom levels producing fractions in the header dimensions, so a 1px gap remains after rounding. Pulling the header 1px up by using top: -1px should cover the gap.

---

How did you test this change?

In a browser before and after the fix.

[caugner]

I can reproduce this in Firefox and Chrome.

I was able to reproduce in BrowserStack Live at 1920x970 on Windows 11 with Chrome 128 consistently at zoom level 75% (but not at 67% / 80% / 90%), and with Firefox 130 once at zoom level 67% (but not at other zoom levels).

The header.top-navigation element nevertheless has a clientTop: 0, so I'm wondering if this is a browser bug?