Open Bug 1089429 Opened 10 years ago Updated 2 years ago

inline-block elements are too small when enough long elements are present

Categories

(Core :: Layout: Block and Inline, defect)

Product:
Core
Component:
Layout: Block and Inline
Platform:
All
Android
Type:
defect

Tracking

()

People

(Reporter: pts+bmo, Unassigned)

Details

(Whiteboard: [font-inflation])

Attachments

(1 file)

Minimized test case
401 bytes, text/html
Details
Attached file Minimized test case — 
I'm attaching a test case.  Steps to reproduce:
Load the test case file in Firefox for Android.

Expected results:
The text "too small" should be the same size as the "aaa"s on the same line.  Both should be the default font size.  (It is displayed correctly in desktop Firefox.)

Actual results:
"too small" is much smaller than the body text.

Details:
The unexpected behaviour is all inline-block elements being displayed too small.  In the test case file, "too small" is a span styled with display:inline-block.  You can add more inline-block elements elsewhere and they also show up too small.

The behaviour is present when the following 4 conditions are met:
1. <body> contains a 31-character text node (not inside other elements).
2. There is either:
   - an <h1> containing 29 characters
   - a <p> containing 58 characters
3. There is any of:
   - an <h2> containing 45 characters
   - an <h1> containing 4 characters
   - a <p> containing 45 characters
4. There is any of:
   - an <h3> containing 72 characters
   - an <h1> containing 72 characters
   - a <p> containing 83 characters

The order of these 4 lines doesn't seem to matter (I've tried many combinations and they all work the same).  It's also unaffected by any other elements in between.

These character counts are the minimum; the bug is still present when more characters are added.

The bug seems to depend on the number of characters, not the displayed width.  You can replace the "a"s with "i"s (narrower) or "w"s (wider) and the number of characters required to see the bug is the same.

However, styling is involved somehow.  If you style the <hn>s like a <p> (font-size: 1em; margin: 1em 0; font-weight: normal;) then the buggy behaviour is gone, even when the headings have as many characters as a <p> would need.

The parsing mode doesn't seem to be involved.  In the test case, I've used html5 style, but everything works the same in XHTML or quirks mode.
Component: General → Layout: Block and Inline
Whiteboard: [font-inflation]
Desktop firefox doesn't do font inflation, which is why you're not seeing anything interesting there....
Status: UNCONFIRMED → NEW
Ever confirmed: true
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: