2

I have the HTML below (also in this fiddle). When I view this in Chrome on my Android device, it looks fine.

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet" />
<h1>This is a header</h1>

<div class="row">
  <div class="column">
    <p>Text</p>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="panel">
      <p>Some long text.</p>
      <hr />
      <p>Some long text.</p>
      <p>Some long text.</p>
    </div>
  </div>
</div>

However, when I adjust the "long text" paragraphs to actually contain a large paragraph of text (as in the snippet below, and this fiddle), then the sizing of the font in the paragraph is rendered bigger for some reason.

<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet" />
<h1>This is a header</h1>

<div class="row">
  <div class="column">
    <p>Text</p>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="panel">
      <p>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.</p>
      <hr />
      <p>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.</p>
      <p>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.</p>
    </div>
  </div>
</div>

This only seems to happen in Chrome on Android (as far as I can tell). Can anyone tell me why this is happening? Is this a bug in Chrome, or have I missed something?

FixMaker
  • 3,759
  • 3
  • 26
  • 44
  • It looks the same to me. – Joshua Apr 17 '15 at 22:02
  • @Joshua, did you check out the fiddles? Strangely, when I view the SE code snippets (using Chrome on Android) they both look the same. The fiddles do not, even though it's the same HTML. – FixMaker Apr 17 '15 at 22:18
  • for me the only difference in chrome between the to pieces of code is the amount of "Some long text."s. Besides that everything is the same for me. – Joshua Apr 17 '15 at 22:27
  • I don't see the problem in Chrome on my desktop PC, only in Chrome on my Android phone. – FixMaker Apr 17 '15 at 22:30

1 Answers1

0

This problem is caused by Chrome for Android implementing "font boosting" (this may apply to webkit browsers in general, but I haven't experienced the problem anywhere else).

Basically, in order to attempt to increase the legibility of web pages on a mobile browser, Chrome will auto-magically increase the font size of a paragraph (so that the user doesn't have to zoom in to read it). However, this is only applied to paragraphs over a certain length, causing longer paragraphs to display in a much larger font size to their context.

This can't be disabled in Chrome. However there are a couple of possible fixes (discussed in this SO question) that can be applied that will stop it from attempting to 'boost' the font sizes. These generally boil down to either:

1. Explicitly specify the height dimensions of the <p> element.

This can be done by applying max-height: 999999px or min-height: 1px to the paragraph. However, this reportedly causes scaling issues in some browsers (e.g. Safari).

2. Explicitly specify the dimentions of the view frame.

Adding the following tag in the <head> section does this:

<meta name="viewport" content="width=device-width, initial-scale=1">

This disables font boosting and fixes the problem in the original question.

Community
  • 1
  • 1
FixMaker
  • 3,759
  • 3
  • 26
  • 44