1924975 - Content length in grid CSS layout alters font size (mobile only)

Status: RESOLVED DUPLICATE of bug 786382

(Core :: Layout: Text and Fonts, defect)

Description

[jarroyo1982]

Attachment: testcase 1 (from reporter)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0
Firefox for Android

Steps to reproduce:

Design a very basic CSS-grid layout: The parent and three children, containing each two elements: An <h3> and a <p>. The text in both elements is specified to be rendered at 32px size by CSS.

Actual results:

Depending on how many text is displayed in the <h3> and <p>, the text size is affected, ignoring the 32px size that was specified by CSS.

It looks like when the text inside the <p> requires more than 2 lines to be displayed, both the <p> and the <h3> font size are enlarged.

This behavior only happens in Firefox Mobile, not in desktop. Please see attached file and run it on mobile. It contains a very basic design that triggers the unexpected behavior.

Expected results:

The text size inside grid children should not be affected by the content length.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Grid' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[jarroyo1982]

I have accidentally discovered that substituting or adding "-moz-grid" to the "display" CSS rule makes Firefox to render the document as expected (all grid childs with the same text size). I'm really surprised, as the "display:grid" has been official since 2017.

Comment 3

[jarroyo1982]

In addition, the unexpected behavior happens only in Firefox 131 for mobile on Android in portrait mode (not landscape), not in the 132 for iOS nor on tablets.

Comment 4

[jarroyo1982]

I have accidentally discovered that substituting or adding "-moz-grid" to the "display" CSS rule makes Firefox to render the document as expected (all grid childs with the same text size). I'm really surprised, as the "display:grid" has been official since 2017.

A mistake from my side. Adding the "-moz-grid" does not set a grid layout. The content turns into regular, non-grid content.

Comment 5

[Daniel Holbert [:dholbert]]

I can reproduce (on Android).

Given that this is Android-specific with text being of-an-unexpected-size, this is almost certainly "font size inflation" (a Firefox-on-Android-specific feature). If I turn off "Automatic font sizing" in the Firefox Settings under Accessibility, then the inconsistency in this testcase goes away.

Font size inflation is a bit magic and I forget the details of how it works, though there's a bit of an overview at https://dbaron.org/log/20111126-font-inflation . I don't know offhand why it's kicking in in some cases but not others in this particular testcase, but it's conceivable that it's one of the heuristics sort-of working-as-intended.

(As to why grid is relevant, that's probably because grid splits up the granularity of whether or not this is one block-formatting-context considered as-a-whole, vs. a bunch of different block-formatting-contexts which get considered separately, or something along those lines.)

Comment 6

[jarroyo1982]

💯 Thank you! It helps a lot.

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (modified to remove grid markup)

Sure!

(In reply to Daniel Holbert [:dholbert] from comment #5)

(As to why grid is relevant, that's probably because grid splits up the granularity of whether or not this is one block-formatting-context considered as-a-whole, vs. a bunch of different block-formatting-contexts which get considered separately, or something along those lines.)

To illustrate/demonstrate this^, here's a version of the testcase with grid removed, and with display:flow-root instead, on the elements that were the grid items in the original testcase. This reproduces the same issues as the original testcase, in Firefox-for-Android (the 2nd element has smaller text).

Comment 8

[Daniel Holbert [:dholbert]]

Note: if you're a web developer and you're running into this causing issues in your own project that you're working on, you can avoid it entirely in one of two ways -- either:
(1) add the CSS declaration -moz-text-size-adjust: none to whatever element you want to disable this behavior (inside that whole element) -- e.g. :root { -moz-text-size-adjust: none; } will disable this for the whole document.

...or, probably better on-the-whole:
(2) Add a "viewport" meta tag (like <meta name="viewport" content="width=device-width, initial-scale=1">) to signal to the browser that you've made sure that your content will render properly in a skinny mobile-phone-sized viewport. Without that meta-tag, mobile browsers will scale down the content to give a viewport that's ~desktop-browser-sized in terms of CSS pixels, and then apply heuristics like font-size-inflation to try to make sure that the most-important text can be read. With a "viewport" meta-tag, the browser doesn't need to bother with these heuristics and things typically work out better.

Comment 9

[Daniel Holbert [:dholbert]]

Having said all that: I think we can close this as a duplicate of bug 786382. The screenshot there in bug 786382 comment 1 looks similar to what's going on here -- similar parts of the same page rendering with substantially different font-sizes, depending on the length of the text.

(bug 786382 is pretty ancient, but the ~good news here is that many/most modern sites are intentionally designing for mobile in mind, with viewport meta-tags i.e. part (2) from comment 8, so this issue hopefully doesn't bite folks too often these days.)

Comment 10

[Daniel Holbert [:dholbert]]

I'm guessing from comment 0 that you ran across this in html/css that you were writing yourself (and hence maybe you can deploy one of the suggested workarounds in comment 8). But if you're hitting this on a particular site that you don't have the ability to edit, please let us know! It looks like we have bug 1891086 filed to track instances of known breakage of this sort.