685803 - Combobox <select> text is overlapping the dropdown arrow button when setting narrow width

Status: NEW

(Core :: Layout: Form Controls, defect)

Description

[Jeremy Tan]

Attachment: Side-by-side comparison of Select form on Google News on Firefox and Safari

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:6.0.2) Gecko/20100101 Firefox/6.0.2
Build ID: 20110902133214

Steps to reproduce:

Loaded Google News.


Actual results:

The default font used inside form widgets are too large for certain sites and overflow the containing space.  This is noticeable in the language selection in Google News or on certain ASP sites (on my corporate Intranet so I can't post a screenshot from there).  It renders fine elsewhere (like for instance on this form).


Expected results:

The font should be smaller and the text should fit within the container.  I've attached a screenshot showing the same page as rendered in Safari.

Comment 1

[Mats Palmgren (inactive)]

Attachment: Reduced testcase

I'm pretty sure this is intentional.  They limit the <select>
width to 9.1em to save space in page layout - the full names
are available in the drop down menu anyway.

Yes, the default fonts are slightly larger in Firefox than
in Safari, this isn't a bug per se.  If you want Firefox to
use smaller fonts overall, then change it in Preferences.

There IS a bug displayed in the screenshot though -
the right part of the clipped text shouldn't overlap the
blue arrow button.

Comment 2

[Mounir Lamouri (:mounir)]

(In reply to Mats Palmgren [:mats] from comment #1)
> There IS a bug displayed in the screenshot though -
> the right part of the clipped text shouldn't overlap the
> blue arrow button.

Does not happen with Firefox 5 on GNU/Linux. Which platform do you use?

Comment 3

[Mats Palmgren (inactive)]

I'm on OSX 10.7 and I can't reproduce the problem (so the reduced testcase is only
to show why the text doesn't fit, I don't know if it demonstrates the paint overlap).
I'm guessing it only occurs with the Aqua theme (in 10.6 and older).

Comment 4

[Jeremy Tan]

I'm on OSX 10.6.  Changing the font settings in Preferences changes the font in the page layout but does not affect the font inside the widget.  Attaching a screenshot.

Comment 5

[Jeremy Tan]

Attachment: Effect of changing font settings in Preferences

Comment 6

[Steven Michaud [:smichaud] (Retired)]

(In reply to comment #1)

> There IS a bug displayed in the screenshot though - the right part
> of the clipped text shouldn't overlap the blue arrow button.

Using Mats' testcase, I can't reproduce this on OS X 10.5.8, 10.6.8 or
10.7.1 (using FF 6.0.2).

(In reply to comment #4)

> Changing the font settings in Preferences changes the font in the
> page layout but does not affect the font inside the widget.

Is this	reproducible on other platforms (i.e. Windows or Linux)?

In any case I'm not sure it's a bug.

Comment 7

[Steven Michaud [:smichaud] (Retired)]

The STR from comment #0 is missing some detail.  I supply it here:

1) Visit http://news.google.com/

2) Select the Canada English edition.

For me, this reproduces the "clipped text overlapping the arrow
button" bug on OS X 10.5.8 and 10.6.8 (in FF 6.0.2), but not on OS X
10.7.1.

Does the "overlap" bug happen on other platforms (Windows or Linux)?

Comment 8

[Mounir Lamouri (:mounir)]

(In reply to Steven Michaud from comment #7)
> The STR from comment #0 is missing some detail.  I supply it here:
> 
> 1) Visit http://news.google.com/
> 
> 2) Select the Canada English edition.
> 
> For me, this reproduces the "clipped text overlapping the arrow
> button" bug on OS X 10.5.8 and 10.6.8 (in FF 6.0.2), but not on OS X
> 10.7.1.
> 
> Does the "overlap" bug happen on other platforms (Windows or Linux)?

Do you see the same bug with the testcase Mats uploaded? news.google.com doesn't provide the same content for everyone.

Comment 9

[Jeremy Tan]

You can get the Canadian English option by going to http://www.google.ca/

Comment 10

[Jeremy Tan]

(In reply to Jeremy Tan from comment #9)
> You can get the Canadian English option by going to http://www.google.ca/

Sorry, I mean http://news.google.ca/

Comment 11

[Steven Michaud [:smichaud] (Retired)]

> Do you see the same bug with the testcase Mats uploaded?

As I said in comment #6, no.

Comment 12

[Mats Palmgren (inactive)]

Attachment: Screenshot on Linux

The overlap also occurs in a recent Nightly build on Linux.
(the screenshot is from Screen Magnifier to make it easier to see)

Comment 13

[Boris Zbarsky [:bzbarsky]]

The font inside the combobox widget is the OS-default font for such widgets, last I checked.  That's certainly the intent!