Open Bug 1477964 Opened 6 years ago Updated 2 years ago

[CSS] Incorrect baseline alignment of Grid items that contain inline-blocks

Categories

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

Unspecified
All
defect

Tracking

()

Tracking Status
firefox61 --- affected
firefox62 --- affected
firefox63 --- affected

People

(Reporter: ilya.streltsin, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

Steps to reproduce:

1. Open the following jsFiddle demo with Firefox: http://jsfiddle.net/qf15s3zv/3/. There are three containers (one Flex container and two Grid containers) with two adjacent items in each. Each item has a header inside that is set to display: inline-block.
2. Compare the vertical alignment of the two adjacent items in the three containers (one Flex container and two Grid containers).


Actual results:

In the second example, the items are aligned by the top instead of the baseline.


Expected results:

In all three examples, both items should be aligned by their (first) baseline, which is the last line of the text in the inline-block header because the content of their first line is the inline-block element.

Chrome and Edge render this example as expected.
For some unclear reason, setting the block element *inside* the inline-block the definite width which is not larger than the container width fixes the alignment of the items (the third example). Unfortunately, percentage widths don't have this effect. I hope this helps to find the cause of the issue.
I managed to reproduce this issue on Nightly 63.0a1 (2018-07-26), Firefox 62.0b11 and Firefox 61.0.1, on Windows 10, Ubuntu 16.04 and Mac OSx.
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout: Block and Inline
Ever confirmed: true
OS: Unspecified → All
Product: Firefox → Core
Version: 61 Branch → Trunk
Priority: -- → P3
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.