Android Chrome ignoring -webkit-text-size-adjust:none property. Text is being scaled when zoomed out

Just discovered a workaround for this. Set a max-height on a parent element of the text to be much larger than it would ever appear. For example,

<p class="intro">
  This is some text that is appearing blown up 
  and ridiculous on Chrome Mobile.
</p>

p.intro {
  max-height: 5000em;
}

You can set the max-height on any parent element. It doesn’t have to be the first parent. For example,

<footer class="primary">
  <p class="intro">
    This is some text that is appearing blown up 
    and ridiculous on Chrome Mobile.
  </p>
</footer>

footer.primary {
  max-height: 5000em;
}

Leave a Comment