Bug Tracker

Opened 9 years ago

Closed 6 years ago

Last modified 6 years ago

#4146 closed bug (invalid)

jQuery width inconsistency with buttons

Reported by: rob.desbois Owned by:
Priority: high Milestone: 1.next
Component: dimensions Version: 1.5.2
Keywords: Cc:
Blocked by: Blocking:


If you have a button-type element on the page then the following code makes it shrink when it seems it should have no effect var w = $("#x").width(); 222 $("#x").width(w); makes element shrink $("#x").width(); 216

This occurs for input[type=button], input[type=submit], input[type=reset] and button elements too.

Attachments (2)

test-jquery-fault.html (677 bytes) - added by rob.desbois 9 years ago.
Testcase showing shrinking button
test-4146.html (659 bytes) - added by dmethvin 9 years ago.
bizarro buttons width

Download all attachments as: .zip

Change History (19)

Changed 9 years ago by rob.desbois

Attachment: test-jquery-fault.html added

Testcase showing shrinking button

comment:1 Changed 9 years ago by rob.desbois

Faulty behaviour seen in Firefox 3.0.6 and IE 6.0

Changed 9 years ago by dmethvin

Attachment: test-4146.html added

bizarro buttons width

comment:2 Changed 9 years ago by dmethvin

In test-4146 I set up a case with two buttons, both with simple 80px width, 5px border, and 10px padding. You'd expect jQuery to return 80 for width but instead it returns 80-10-10-5-5=50. If you ask jQuery for $("#x1").css("width") it correctly returns 80px. I *think* that means the browsers I tested (FF3 and IE8RC1) include the border and padding in the css width.

comment:3 Changed 9 years ago by dmethvin

Summary: jQuery.width returns innerWidth but sets outerWidth?jQuery width inconsistency with buttons

comment:4 Changed 8 years ago by dmethvin

Component: unfilledcore
Priority: majorminor

comment:5 Changed 7 years ago by dmethvin

Milestone: 1.3.2
Status: newopen

comment:6 Changed 7 years ago by jboesch

Looks like the browsers are adding padding-left, padding-right as defaults. Then in jQuery, we run it through an $.each loop on line 295 in css.js. It's doing a val -= on the padding... thus taking away padding we didn't explicitly set:


comment:7 Changed 7 years ago by jboesch

Here are some more findings... offsetWidth is not taking padding/borders into consideration for quite a few different input types/buttons: http://jsfiddle.net/jboesch26/Gtm5H/

Try running that jsfiddle in some different browsers... It's a bummer that these results are different in Firefox 3.6 and in Chrome 9.0.597.102

Last edited 7 years ago by jboesch (previous) (diff)

comment:8 Changed 7 years ago by jboesch

This seems like a browser bug. Having offsetWidth work in some browsers for some elements and not for others is very weird. This problem exists when you call outerWidth() on input/button elements too. See my fiddle for examples.

Last edited 7 years ago by jboesch (previous) (diff)

comment:9 Changed 7 years ago by jboesch

Prototype has this problem as well: http://jsfiddle.net/jboesch26/xW2zW/ I think the only way around this issue is scrapping offsetWidth/offsetHeight.

Dojo does not have this problem: http://jsfiddle.net/jboesch26/CAUS3/ Dojo is only using offsetWidth/Height when the value of the element is "auto".

I will look into landing a patch.

comment:10 Changed 7 years ago by jboesch

Landed a fix for this: https://github.com/jquery/jquery/pull/325/files UPDATED: new pull request

Last edited 6 years ago by jboesch (previous) (diff)

comment:11 Changed 7 years ago by dmethvin

Milestone: 1.6
Priority: minorlow

If this patch is good it would be good to land in 1.6.

comment:12 Changed 6 years ago by jeresig

Resolution: fixed
Status: openclosed

Fix formatting of pull 325. Fixes #4146.

Changeset: 84712bd624a9a4eeaab9ea9c543bba494f2cc3e1

comment:13 Changed 6 years ago by jboesch

Should be set to invalid. Setting border-sizing: content-box in the CSS fixes it in FF. By default FF uses border-sizing: border-box for buttons.


comment:14 Changed 6 years ago by timmywil

Component: coredimensions
Resolution: fixed
Status: closedreopened

There is still a problem in IE8 returning inconsistent width values for inputs and buttons. The inconsistency is present with both border-box or content-box. http://jsfiddle.net/timmywil/AFRt7/4/

comment:15 Changed 6 years ago by timmywil

Status: reopenedopen

comment:16 Changed 6 years ago by john

Milestone: 1.61.next
Priority: lowhigh

comment:17 Changed 6 years ago by timmywil

Resolution: invalid
Status: openclosed

I've looked into this further and it seems we're fine here. IE8 and Chromium 12 actually have the same setting for box-sizing for buttons, but IE has different default border widths and padding widths, hence the different values. If I set the borders and paddings to equal amounts, all consistent. The reason setting the width to some value might make the button smaller is due to the box-sizing.

Note: See TracTickets for help on using tickets.