417811 - Dropdown controls width on OSX is -1 of the correct size and on Windows +1 of the correct size.

Status: RESOLVED WORKSFORME

(Core :: Widget: Cocoa, defect)

Description

[vance]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9b3) Gecko/2008020511 Firefox/3.0b3
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9b3) Gecko/2008020511 Firefox/3.0b3

<select name="dd" style="width:136px;">
<input name="cc" type="text" style="width:130px;" />

Problem:

Run this HTML on OSX, capture the screen, zoom in, draw a line, and you will see that the drop down is -1 pixel (1 pixel smaller) then the input box.

Now go to windows and run the same code. Capture the screen, zoom in, draw a line, and you will see that the drop down is +1 (not a type, it is plus) (1 pixel larger) then the input box.

Expected result:
I expect the windows and osx version to be consistent.

Note:
Internet Explorer and Safar: width of 136 and 130 makes the drop down and input to be EXACTLY the same.

Proposed fixes:
Either fully fix the issue, so they are the same size (as IE and Safar)
Or at list make them consistent so on both platforms OSX and Win32 they are off by the same amount, and not off by +1 and off by -1 on the other


Reproducible: Always

Steps to Reproduce:
<select name="dd" style="width:136px;">
<input name="cc" type="text" style="width:130px;" />
Actual Results:  
OSX off by -1
Win32 off by +1

Expected Results:  
equal

Comment 1

[Boris Zbarsky [:bzbarsky]]

Almost certainly a native theming issue, not a form controls issue....

Comment 2

[Stefan [:stefanh]]

(In reply to comment #1)
> Almost certainly a native theming issue, not a form controls issue....
> 

Yeah, you're right. Since OS X is mentioned first, I'll dump this in cocoa.

Comment 3

[Boris Zbarsky [:bzbarsky]]

> Run this HTML on OSX, capture the screen, zoom in, draw a line

So I just checked on Mac.  The native theme look seems to include some space outside its rounded border.  When I put an inline-block with a border around the controls, they end up the same width, so the controls are in fact sizing correctly as far as I can tell in terms of layout.  I can confirm this from a frame dump.  So this is purely a paint-time issue.

I should note that in Safari this space outside the border is not present.

Comment 4

[Stefan [:stefanh]]

Hmm, I forgot about bug 418294 until I got bugspam from it. It's slightly different, though. But maybe bug 418294, comment #9 happen here as well?

Comment 5

[Boris Zbarsky [:bzbarsky]]

I should note that the original bug was presumably in standards mode, since it talks about different widths.  But even then, things line up fine for me on Mac with those widths if I look at the layout data.  So this may indeed be bug 418294, comment #9.

Comment 6

[Ciprian Muresan [:cmuresan], Formerly of Ecosystem QA - please needinfo @mcoman for things regarding the team]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:50.0) Gecko/20100101 Firefox/50.0

I have tested this issue on the latest Firefox release (47.0) and the latest Nightly (50.0a1, Build ID 20160615030209) and the -1 offset seems to be consistent throughout all browsers I have tested with (Firefox, Nightly, IE, Edge, Chrome) on Windows and (Firefox, Nightly, Chrome and Safari) on Mac.

Vance, could you please retest this issue on the latest Firefox release and latest Nightly (https://nightly.mozilla.org) and provide your results? When doing this please use a new, clean profile.