search

observablehq / feedback

Customer submitted bugs and feature requests
42 stars 3 forks source link

Flickering title header #461

Open hellonearthis opened 2 years ago

hellonearthis commented 2 years ago

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: image and this: image

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 commented 1 year ago

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 commented 1 year ago

I can't repro this issue either.

hellonearthis commented 1 year ago

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