Q:

Foundation CSS font sizing issue (Chrome on Android)

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?

A:

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.

