Code Blocks Generated With Hugo Are Looking Strange In Safari

I was working on yet another website redesign and I was actually proud to release it even thought it needed a lot of work. For instance, I forgot to make my codeblocks scrollable. .highlight {overflow-x: auto;} fixes it, but then I noticed that font sizes looked different within a code block.

I thought that minifying code was fucking things up, but I opened up the dev tools and noticed flex around the code lines. Frantically googling a combination of “Hugo Code Block Flex Broken” and came across a thread discussing this issues on a theme’s GitHub. I didn’t read much of it but I saw a comment by @bglw explaining that iOS has a font-sizing issue with flexbox and I’d have to add some styles to fix it.

/* Fixes iOS font sizing anomaly */
html {
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

text-size-adjust sounded familiar and it turns out that I heard about this issue last year. I’m writing this at 11pm and I don’t wanna go down a rabbit hole, but it looks like this happens when the text is wider than the screen?

This all raises the question—why didn’t I notice it before and if it’s because it didn’t happen before, why now?

I might examine this some other time but for now I’m happy with my proof of concept site.

P.S. Sorry for the strange title, I did it in case someone might have the same problem in the future since it seemed like such an esoteric issue.