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

Question

Our client requested a website, but didn't want to pay for a mobile version. We still are making it work on mobile. When zoomed all the way out, Chrome on Android (4.0) is scaling a bunch of the text. We have tried setting the -webkit-text-size-adjust:none property, but it seems to be ignored and text is still being scaled up.

Works fine on iOS.

Any suggestions?

score 32 · Answer 1 · answered Feb 28 '13 at 14:10

32

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;
}

answered Feb 28 '13 at 14:10

bradt

531
8
8

This, as well as the answer that was accepted should both be the answers – ntgCleaner May 21 '14 at 22:16
but why..? Can you explain? – royrui Oct 29 '14 at 11:31
This is incredible. Can't upvote more. The accepted answer doesn't work for me, hope it does for others – Andrew Liu Dec 10 '14 at 22:41
I can confirm this is working for me, too. Awesome! I've targeted the CSS at Android browsers only just in case this causes any unwanted effects on other devices. – athms Dec 19 '14 at 16:44
yep, working also for me. Annoying problem and solved in an instant. Thank you very much! – luke_mclachlan Jan 21 '15 at 16:18
1

Thank god that there's a solution for it! – user828591 Mar 13 '15 at 16:41
I think some of [supperss adjustment contitions](https://drafts.csswg.org/css-size-adjust/) are triggered for this hack. – starikovs Aug 20 '15 at 11:34

score 7 · Accepted Answer · answered Jul 29 '12 at 23:13

7

Note that the -webkit-text-size-adjust property you mention is non-standard. Read more about it here.

Currently Chrome for Android scales text using font boosting and there's no way to disable it.

If you want a way to disable font boosting, please provide your use-case and log an issue via new.mcrbug.com.

answered Jul 29 '12 at 23:13

Boris Smus

8,220
2
36
33

26

Font boosting can be disabled by providing a `max-height` greater than the current height. The linked webkit ticket suggests `max-height: 1000000px`. – Reuben Mar 07 '13 at 02:06

score 6 · Answer 3 · answered Sep 02 '14 at 08:20

6

<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes"> in the <head> tag could disable zoom

answered Sep 02 '14 at 08:20

Julia

1,301
1
14
29

This worked great to disable the screwy chrome resizing on mobile. Thanks! – BR89 Nov 18 '14 at 21:48

score 4 · Answer 4 · edited May 23 '17 at 12:00

4

I had the same issue with Firefox on Android.

The solution for me was to add the style "float: left;" to the div containing the problem text.

You might need to set the width of the div to the same as the parent (in pixels or 100%) to ensure it doesn't affect the rest of the divs.

See How to prevent mobile browser from resizing text

edited May 23 '17 at 12:00

Community

1
1

answered Nov 07 '13 at 00:48

Rick

141
3
16

score 3 · Answer 5 · answered Sep 20 '12 at 17:21

3

-webkit-text-size-adjust:none is so horrible!

I have poor eye site and constantly have my pages at 200% default zoom. With -webkit-text-size-adjust:none, I cannot read anything, and my only alternative is to use Firefox. It's my number one problem these days when browsing.

Too many sites use this, especially embedded Facebook comments on web pages. You should stop using it and create an interface that will work with any-sized font.

answered Sep 20 '12 at 17:21

Theodore R. Smith

21,848
12
65
91

5

Except it doesn't zoom everything, just what it considers "important", totally breaking CSS. – Alice Purcell Apr 24 '15 at 16:27

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

5 Answers5

Linked