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

Status: VERIFIED INVALID

(Core :: General, defect)

Description

[Alessandro Vernet]

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

[philippe (part-time)]

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]

Comment 2

[Boris Zbarsky [:bzbarsky]]

Verified.  This is a known bug in Webkit's implementation of inline-block.

Comment 3

[Alessandro Vernet]

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

[SkyLined]

@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.