903566 - Incorrect vertical-alignment with overflow:hidden;

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[aaron]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36

Steps to reproduce:

the styleguide we use internally on our site shows the button element not vertically aligned correctly when it has `overflow:hidden; vertical-align:baseline;` applied to it.

Test case:
http://codepen.io/anon/pen/GBxDk

Current patch:

I am using `overflow: -moz-hidden-unscrollable;` instead of `overflow: hidden;` until this is fix.


Actual results:


Alignment of button element is misaligned


Expected results:


Alignment of button should be the same as other elements.

Comment 1

[Drew Willcoxon :adw]

Misaligned button labels sounds like bug 893298, which was fixed for Firefox 25.  Please test with Firefox 25 or later to see if you can reproduce.  If you can, then we can reopen this bug, but in that case, please make your test case smaller, ideally as small as possible to illustrate the bug.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Bug 893298 was a Fx25-specific regression, which was then fixed in the same cycle.

So I really doubt that this bug has anything to do with it.

Reopening, but I agree with comment 1: this needs a testcase that makes it clear where you're seeing misalignment issues.  I can't tell what things you expect to be aligned with each other in that codepen and why.

Comment 4

[Boris Zbarsky [:bzbarsky]]

> So I really doubt that this bug has anything to do with it.

That is, unless reporter is using a nightly from a specific one-week range or so when bug 893298 existed...

Comment 5

[aaron]

updated test case: http://codepen.io/anon/pen/JyfxG

Comment 6

[aaron]

I also left a comment saying which line to uncomment to show the problem.

be sure to test in chrome/safari to see expected functionality.

Comment 7

[aaron]

tested in 26.0a1 (2013-08-09) this issue is still present.

Comment 8

[Boris Zbarsky [:bzbarsky]]

Thank you for the much smaller testcase!

The testcase from comment 5 renders identically for me in a current Firefox nightly and a current Chrome dev build: button 2 is higher than the other buttons.

The reason for that is that the "button" is actually a non-replaced inline styled as "display: inline-block", and here is what the spec has to say about vertical alignment of inline-block elements:

  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.

Note that WebKit (and hence Chrome) used to not implement the spec correctly here and the Blink team only recently fixed it (see https://codereview.chromium.org/21414002/ ) which is why I'm seeing identical behavior in Firefox and a current Chrome dev build while you see different behavior in presumably an older build of Chrome.  Safari, since it doesn't use Blink, continues to have the old buggy behavior....

Comment 9

[aaron]

I see, so in order to get consistent alignment across all buttons is there something that is recommended? I'm trying to build a CSS code base which developers can use without worrying about alignment. I've seen bootstrap use vertical-align: middle and others use vertical-align: bottom;

but I'm unsure what is more consistent...

Comment 10

[Boris Zbarsky [:bzbarsky]]

The ideal thing is to not fake buttons with display:inline-block stuff and use baseline alignment...

Failing that, top or bottom alignment is probably simplest.  :(