Back to all

Font size 'pop' when using Dynamic Type on iOS

Hi there, we enabled https://median.co/docs/dynamic-type for our project. It works, but the font size changes after the page hast already started loading. I had a dig, and can see the style is being injected with:

var style = document.createElement('style');
style.innerHTML = 'body { -webkit-text-size-adjust: 190%; }';
document.head.appendChild(style);

This ensure fonts scale to match the user preference in iOS, but because of the way it is being injected, it will happen after the site has already started loading, which leads to the font size 'popping' to a smaller or larger size from the default 100% value.

Are there other options we could explore that would allow us to make use of Dynamic Type without the layout shift? Thanks!