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

Reported by:	adamsentz@gmail.com	Owned by:	adamsentz@gmail.com
Priority:	low	Milestone:	1.6
Component:	manipulation	Version:	1.4.1
Keywords:		Cc:
Blocked by:		Blocking:

Description

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.

Attachments (0)

Change History (4)

Changed November 30, 2010 08:37PM UTC by rwaldron comment:1

_comment0:	\ 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 jQuery 0 GIT version to ensure the issue still exists. Be Excellent to eachother! \ → 1291149482522633
owner:	→ adamsentz@gmail.com
status:	new → pending

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!

Changed November 30, 2010 09:31PM UTC by anonymous comment:2

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.

Changed November 30, 2010 11:55PM UTC by jitter comment:3

component:	unfiled → manipulation
priority:	undecided → low
resolution:	→ invalid
status:	pending → closed

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.

Changed March 03, 2011 09:20PM UTC by jboesch comment:4

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

Side navigation