Bug Tracker

Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#7664 closed bug (invalid)

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

Reported by: adamsentz@… Owned by: adamsentz@…
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.

Change History (4)

comment:1 Changed 9 years ago by Rick Waldron

Owner: set to adamsentz@…
Status: newpending

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!

Version 0, edited 9 years ago by Rick Waldron (next)

comment:2 Changed 9 years ago by 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.

comment:3 Changed 9 years ago by jitter

Component: unfiledmanipulation
Priority: undecidedlow
Resolution: invalid
Status: pendingclosed

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.

comment:4 Changed 8 years ago by jboesch

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

Note: See TracTickets for help on using tickets.