vertical-align: baseline stops working when using overflow: hidden

VERIFIED INVALID

Status

()

VERIFIED INVALID
8 years ago
8 years ago

People

(Reporter: avernet, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

8 years ago
User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b7) Gecko/20100101 Firefox/4.0b7
Build Identifier: 

The vertical-align: baseline stops working for a box on which you have an overflow: hidden. To see what I am talking about, see the screenshots on:

http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Firefox:-vertical-align:-baseline-s

In the screenshot you see there, the box in question has a gray background. On Firefox, without the overflow: hidden, the text inside the gray box is at the same level as "Label:" but then looses its allignement when adding an overflow:hidden. Chrome/Safari doesn't have this problem.

Reproducible: Always

Steps to Reproduce:
1. Go to http://jsfiddle.net/avernet/PpTYU/
2. In the "result" pane, see how the gray box is not baseline-aligned at the same level of "Label:".

Comment 1

8 years ago
Gecko (Firefox) is doing the correct thing here (as does Opera, btw). And Webkit is wrong.
The key is your combination of overflow:hidden on an element with display:inline-block

See http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
[quote]
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
[/quote]
Status: UNCONFIRMED → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → INVALID
Verified.  This is a known bug in Webkit's implementation of inline-block.
Status: RESOLVED → VERIFIED
(Reporter)

Comment 3

8 years ago
Philippe, Boris: awesome, thank you for responding so quickly and for all the details. I am very glad to be wrong about this one.

Comment 4

8 years ago
@Boris: I couldn't find a bug for WebKit, so I created one:
https://bugs.webkit.org/show_bug.cgi?id=53498
Please de-duplicate if you remember which known bug you are referring to.
You need to log in before you can comment on or make changes to this bug.