649968 - Wrong select dropdown width calculation

Status: RESOLVED INVALID

(Core :: DOM: CSS Object Model, defect)

Description

[louis cuny]

User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0) Gecko/20100101 Firefox/4.0
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0) Gecko/20100101 Firefox/4.0

On a <select> without css fixed width.
When calculating its width in javascript it does not return the same result as other browsers (even ff 4 on windows).

Reproducible: Always

Steps to Reproduce:
1. create a <select> without fixed width
<select id='test'>
          <option value='fr'>France</option>
          <option value='ca'>Canada</option>
          <option value='ar'>Argentina</option>
          <option value='pt'>Portugal</option>
          <option value='us'>United States</option>
          <option value='gb'>United Kingdom</option>
          <option value='au'>Australia</option>
          <option value='ao'>Angola</option>
          <option value='aq'>Antarctica</option>
          <option value='bq'>Burkina Faso</option>
          <option value='cn'>China</option>
</select>

2. calculate the width of this select in javascript

(function($){

  $(function(){
    console.log($('#test').width());
  });

})(jQuery)
Actual Results:  
94

Expected Results:  
around 120

Firefox 4.0 - Mac os x => 94
Firefox 4.0 - Windows 7 => 120
chrome 10.0 - mac os x => 118
ie9         - Windows 7 => 118
ie7         - Windows 7 => 117

All browsers have are around 120 except ff 4.0 on mac os x.

Comment 1

[Boris Zbarsky [:bzbarsky]]

On Mac, the dropmarker is part of the padding.  You're measuring the content width; you presumably want to measure the border-box width ("outerWidth" in jquery parlance, iirc).