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.
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