Pixelpicker
While writing the last entry I noticed that the header seemed to flicker when switching between an entry and a top-level page. Barely noticable, but at least a pixel or so! On closer inspection, there's even a 1.6 pixel difference. We can't have that! 😉
I was relieved to see that the difference was measurable. 😇 Turns out my CSS
spidey senses aren't that sharp, so I didn't immediately look at the right place
to find the source for the difference. Digging deeper and inspecting the nested
div
I still didn't see a difference in the layout that would explain the
difference in the computed height
:
So rather than inspecting the generated output, I tried to look at the templates
that are generating these pages. I fiddled with the sections a bit, removing
some to see if that has an effect but to no avail. Finally, goold old
ediff-regions-wordwise
to the rescue!
Turns out the entry template is the only one missing a link
element to
download the Roboto font. Looking back, I could have noticed the difference when
inspecting the div
elements, as one is listing the
rendered font as a "Local file" and the other is a "Network resource". Or even
earlier, an experienced CSS master might have heard "flicker" and immediately
thought of FOUT/FOIT and would have started by checking the
used fonts right away? 🤷 Well, here's to learning! Maybe writing this up will
sharpen my spidey senses.
To fix the issue, I ended up dropping the link
elements rather than adding
another one. I still specify Roboto as the preferred font, as that's what I use
and check when writing entries, but keep the generic sans-serif
and
monospace
as fallbacks. Looking at the content on my blog, I think it's simple
enough that it should render fine with most sans-serif
fonts. This way you get
to see your favorite fonts rather than mine (if you don't have Roboto installed
😜) and we save a trip across the tubes to download it.
PS. The title is meant to be a spin on the word "nitpicker" which shows up as a translation for a German favorite of mine: "Korinthenkacker" 😉