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

NEW
Unassigned

Status

()

P3
normal
8 months ago
8 months ago

People

(Reporter: ilya.streltsin, Unassigned)

Tracking

Trunk
Unspecified
All
Points:
---

Firefox Tracking Flags

(firefox61 affected, firefox62 affected, firefox63 affected)

Details

(Reporter)

Description

8 months ago
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.
(Reporter)

Comment 1

8 months ago
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.

Comment 2

8 months ago
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
status-firefox61: --- → affected
status-firefox62: --- → affected
status-firefox63: --- → affected
Component: Untriaged → Layout: Block and Inline
Ever confirmed: true
OS: Unspecified → All
Product: Firefox → Core
Version: 61 Branch → Trunk
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.