Fixing Syntax highlighting for Hugo chroma in iOS

I recently came across the issue of text being different sizes when displayed as a code fence in Hugo.

Invalid Chroma formatting in iOS

It was hard to debug as at only seemed to happen on iOS in both Chrome and Safari. It wasn’t happening on the desktop so I wasn’t able to jump into dev tools to inspect why the elements are displaying as different sizes.

It turns out that it’s an issue with how iOS inteprets Flexbox.

I needed to add the following CSS to combat this issue.

1code {
2    /* Fixes iOS font sizing anomaly */
3    text-size-adjust: 100%;
4    -ms-text-size-adjust: 100%;
5    -moz-text-size-adjust: 100%;
6    -webkit-text-size-adjust: 100%;
7}

I found the solution here