1011385 - Button with long text or other overflow does not hide the overflow

Status: RESOLVED INVALID

(Core :: Layout: Form Controls, defect, P5)

Description

[Jumper Chen]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0 (Beta/Release)
Build ID: 20140506152807

Steps to reproduce:

Run with this example - http://jsfiddle.net/ADMxA/



Actual results:

The text inside button will show over the button's edge.


Expected results:

The text inside button should not show over the button's edge.

Comment 1

[Alice0775 White]

The behavior was changed by Bug 491180
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?startdate=2009-07-22+00%3A00%3A00&enddate=2009-07-23+05%3A00%3A00

Chrome34 and IE11 does clip the text.

Comment 2

[Boris Zbarsky [:bzbarsky]]

Note that when I fixed bug 491180 we in fact matched the WebKit behavior after the fix...

It looks like they have since changed their behavior.  I'm not sure it's worth following them in the incessant flip-flopping until there's an actual spec here.

Comment 3

[Boris Zbarsky [:bzbarsky]]

And in particular, note that the behavior in current WebKit is weird: they're clipping some overflow but not other kinds.  See testcases in bug 491180.

Comment 4

[Mats Palmgren (inactive)]

Fwiw, it's easy to workaround: button { overflow:hidden; }

Comment 5

[Ilya]

I believe that the current behavior of Firefox is correct. The default value of `overflow` property should be `visible`, it's useful to position some decorative elements (like arrows etc.) outside the button. IE stops to clip the button's content when `overflow:visible` is set, popular normalize.css (http://necolas.github.io/normalize.css/) uses this to fix IE's default behavior which looks like a bug. The behavior of Chrome seem to be sort of regression.