Katex CSS briefly hides equations on page load

[FreyaHolmer]

Hey! I'm using katex to render equations as a build step locally, before publishing the page as a static html file.

It's been working great in general! The one minor thing I can't figure out though, is that the katex CSS file makes the equations invisible on page load, to then reappear a little later

notably, this doesn't happen if I omit the katex css file entirely, in that case they are visible immediately on page load and don't pop away

I'm loading the css in the html header like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.css" integrity="sha384-OH8qNTHoMMVNVcKdKewlipV4SErXqccxxlg6HC9Cwjr5oZu2AdBej1TndeCirael" crossorigin="anonymous">

Does anyone know what gives?

[edemaine]

I'd guess this is related to font loading. I forget which font-display option is currently the default but you could try changing the CSS. See e.g. https://css-tricks.com/the-best-font-loading-strategies-and-how-to-execute-them/ for some options.

[edemaine]

I'm not sure there is a way to override... :-(

I found #2242 which proposes changing this in base KaTeX. Would you be willing to put together a small PR?

[FreyaHolmer]

sure!

FreyaHolmer@2258850

[edemaine]

Thanks! Could you open a PR for it? (I'd rather be the reviewer than the author.)

[FreyaHolmer]

uuuh how closely do I need to follow the PR commit message guidelines? seems like a lot ;-;

[FreyaHolmer]

ok I think I did it correctly
#3940