Flickering title header

[hellonearthis]

When the page is almost scrolled to the top, the logo flickers like it can't work out which state to be in.

It changes between this: and this:

This happens in the newest chrome.

Here is what the debugger is showing. When I look at the browsers scrollY, it says I'm at 81.06666 until I hit enter then it's 73.6666 Not sure if that helps.

https://user-images.githubusercontent.com/121805/177328481-c165ac6c-1790-4243-98fe-0e289925f479.mp4 Slowing down the video you can see what elements are changing.

notebook: https://observablehq.com/d/0e3edad62b04a9a7#cell-1344

[CobusT]

I was looking at this again today, and cannot reproduce it anymore. Much has changed since this was logged. Can you please check if you still see this behavior on your end?

[grant]

I can't repro this issue either.

[hellonearthis]

I saw a single flicker last week, but it's nowhere near as bad as it was.

I found this talk by Vitaly Friedman (Creative lead of Smashing Magazine) from nordic.js very useful on fonts, font loading and how to avoid the jitter jumps as fonts are swapped from defaults in different browsers. https://youtu.be/D87jMLjYWiE?t=32764