Marfa “flicker” and design bugs?

Hosting on Micro.blog
1

I’m micro-tinkering again for a bit, and there’s a weird thing in Marfa I don’t recall encountering a few years ago. It doesn’t happen with every page load, but does happen on initial site load and then every intermittent now and then. You should be able to see it in this video. Basically the navigation header flickers before establishing the CSS, and the top of the border doesn’t render. And then on reload or clicks to new pages it’s usually fine, until eventually such a click shows the flicker again. Any ideas? Thanks.

ETA: And sometimes, inexplicably, it happens every time I click to new page on the site.

ETA: When it happens, it also flickers the site footer navigation.

ETA: Weirder still, the dark mode for Marfa, when activated, I haven’t seen flicker once.

ETA: Weirder still, I can only replicate this behavior on Safari desktop and Safari for iPad. On desktop neither Firefox nor Chrome does this.

2

What’s shown in the video is an animated transition from a larger to a smaller font size. It’s caused by the following CSS in the Marfa theme:

nav.main-nav a, #footer a, #post-nav a, p a {
  /* … */
  transition: all .35s;
  transition-timing-function: cubic-bezier(.7, 0, .3, 1);
}

The dark mode version of Marfa explicitly disables animation with transition: none !important; and that’s why the flickering goes away when you activate dark mode.

As to why this is only happening in Safari, it might actually be an implantation bug in that browser. But to know for sure, one would have to analyze the CSS in more detail.

3

Hilariously I did somehow bungle my way to discovering that disabling transitions solved the problem, but forgot to come back and mention it here. Thanks!