ARTICLE AD BOX
Yeah, this is a tricky one. Mobile browsers and web view wrappers can get really aggressive with text scaling, and unfortunately not all of them respect text-size-adjust.
One approach that can work is to measure the actual rendered size of your text dynamically and adjust your layout accordingly. For example, you could use JS to compare the computed font-size of an element against the expected font-size, and then apply a scaling factor to your line-height or padding:
const span = document.querySelector('.animated-char') as HTMLElement; const computedFontSize = parseFloat(getComputedStyle(span).fontSize); // in px const originalFontSize = 16; // whatever you defined in your CSS const scaleFactor = computedFontSize / originalFontSize; // then apply inverse scaling to padding or line-height span.style.paddingTop = `${originalPadding / scaleFactor}px`; span.style.lineHeight = `${originalLineHeight / scaleFactor}px`;Basically, you’re letting the browser scale the font however it wants, then adjusting the other metrics in JS to compensate. This tends to work across iOS webkit, Android browsers, and even tricky webviews like Facebook.
Another trick that can sometimes help is wrapping your text in a container with transform: scale() instead of adjusting padding/em manually, because transforms aren’t affected by text-size-adjust. But this can be more complex if you have interactive animations per character.
So yeah—there’s no pure CSS solution that will cover every custom web view, but detecting the computed font-size in JS and adjusting your layout accordingly seems to be the most robust approach.
