.width() returns incorrect width of select elemets in FF3+ for OS X

[adamsentz@…]

In Firefox 3 or later for OS X, as of the changes in jQuery 1.4.1 .width() returns the width of the content area (content box) instead the entire select box (border-box) as would be expected, and as it works in every other browser I've tested.

.width(value) still sets the width according to the "border-box" model.

This means that if you get the width of a select element and then set the width to that value its width will decrease. I've tested FF3.6 PC, IE8, Safari 5 for OS X, and the latest version of Chrome for both OS X and Windows 7. I am only a able to reproduce this behavior in Firefox 3+ for OS X.

[rwaldron]

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!

Additionally, test against the latest jQuery release and the jQuery 0 GIT version to ensure the issue still exists. Be Excellent to eachother!

[anonymous]

here's a test case -  http://jsfiddle.net/ztb4E/

The alerts should both return the same value.

Safari 5 and Chrome 7 for OS X return the same value, 61px, both times. All browsers I tested in Windows 7 had a 2px drop from the first value to the second e.g. 61px and 59px. Firefox 3.6 alerts 44px and then 17px.

[jitter]

Thanks for taking the time to contribute to the jQuery project by writing a bug report and providing a testcase!

I don't think there is any bug here. The documentation on width() and width(value) seems sufficiently clearly:

Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property.

and

Note that .width('value') sets the width of the box in accordance with the CSS box-sizing property.

So the behavior of width(value) depends on the default for box-sizing in the browser. Many browsers (as stated in the  CSS3 box-sizing docs) have border-box as default for replaced elements and input elements while using content-box for the other elements. Maybe you just didn't know this specific information.

Check also this  test case where you can see that it works like expected. And where you can see that the select has border-box as default and the div has content-box as default. After the "switch" of the box-sizing property you can see how the behavior changes.

[jboesch]

I think my fix in http://bugs.jquery.com/ticket/4146 fixes this issue as well.