Skip to main content

Bug Tracker

Side navigation

#10413 closed bug (fixed)

Opened October 03, 2011 10:11PM UTC

Closed May 13, 2012 04:53PM UTC

Last modified May 16, 2012 06:04PM UTC

width, innerWidth, innerHeight, outerWidth, outerHeight are inaccurate for a "box-sizing: border-box" child of hidden parent

Reported by: mikesherov Owned by: mikesherov
Priority: low Milestone: 1.8
Component: css Version: 1.6.4
Keywords: 1.8-discuss Cc:
Blocked by: Blocking:
Description

This is very similar to #9441, except this is specifically when a child (that has the box-sizing:border-box style) of a hidden div is queried.

Basically, the fallback (that uses the css width/height instead of the javascript offsetWidth/Height to calculate dimensions) is applied, and assumes that the css width doesn't contain padding and border. However, when box-sizing is border-box, the css width is the same as offsetWidth/Height, in that it accounts for padding and border.

The fix is simple, apply the same logic that is applied to offsetWidth/Height to the fallback version if boxSizing is border box.

Attachments (0)
Change History (23)

Changed October 04, 2011 01:28AM UTC by timmywil comment:1

component: unfiledcss
owner: → mikesherov
priority: undecidedlow
status: newpending

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

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/FrKyN/ Open the link and click to "Fork" (in the top menu) to get started.

Changed October 04, 2011 01:39AM UTC by anonymous comment:2

I have a patch with unit tests. Forgot to add it here:

https://github.com/jquery/jquery/pull/528

Changed October 06, 2011 11:29PM UTC by timmywil comment:3

This might be too much code for such an edge case.

Changed October 07, 2011 12:27AM UTC by mikesherov comment:4

status: pendingnew

Yea, I kind of agree.

It would be a lot less code if there was already generic vendor prefix detection built into jQuery I could leverage. As far as I can tell, it's not there yet. However, that's not for me to decide when/if jQuery chooses to do that. It's a bit ironic it isn't there yet as one of the things that made me first choose jQuery was its ability to normalize cross-browser behavior.

Maybe I'll redo this bug if/when vendor prefix detection is there for me to leverage.

Changed October 07, 2011 02:05AM UTC by dmethvin comment:5

status: newopen

Yeah but a lot of people also started using jQuery because it was small ... we've got several conflicting goals at work here. If you have some idea how the reusable vendor-prefixing code might look (and how to keep it small) we'd be interested in hearing about it. We'll be starting the call for 1.8 features soon.

Related to #7986 and #5520. This box-model stuff is a pain.

Changed October 07, 2011 02:41AM UTC by mikesherov comment:6

@dmethvin, don't get me wrong. Not complaining, just reflecting. I understand the whole feature creep argument, especially with a public API. Once you commit to supporting something, it's really hard to cut it later or change your mind (jquery 1.6 and Boolean attributes come to mind). Also, I agree with your code bloat argument.

The box-model stuff is a pain, but for me it's a good pain... increased flexibility in the box model means less calls for jQuery to support something like ability to set outerWidth() values.

api.jquery.com/jQuery.csshooks has a good start for vendor prefixing. Thanks for tipping me off to the feature nomination. I'll be voting for vendor prefix support in 1.8!

Changed October 08, 2011 07:12PM UTC by mikesherov comment:7

@dmethvin, I went ahead and updated my pull request to include generic vendor prefixing. I tried my best to keep the functionality as small as possible.

https://github.com/jquery/jquery/pull/528

Changed November 30, 2011 02:49AM UTC by mikesherov comment:8

keywords: → 1.8-discuss
status: openassigned

Changed December 06, 2011 05:54PM UTC by dmethvin comment:9

blocking: → 7986

Changed December 06, 2011 05:54PM UTC by dmethvin comment:10

Let's be sure that the eventual solution fixes #7986.

Changed December 13, 2011 01:20PM UTC by mikesherov comment:11

description: This is very similar to #9441, except this is specifically when a child (that has the box-sizing:border-box style) of a hidden div is queried. \ \ Basically, the fallback (that uses the css width/height instead of the javascript offsetWidth/Height to calculate dimensions) is applied, and assumes that the css width doesn't contain padding and border. However, when box-sizing is border-box, the css width is the same as offsetWidth/Height, in that it accounts for padding and border. \ \ The fix is simple, apply the same logic that is applied to offsetWidth/Height to the fallback version if boxSizing is border box.This is very similar to #9441, except this is specifically when a child (that has the box-sizing:border-box style) of a hidden div is queried.\ \ Basically, the fallback (that uses the css width/height instead of the javascript offsetWidth/Height to calculate dimensions) is applied, and assumes that the css width doesn't contain padding and border. However, when box-sizing is border-box, the css width is the same as offsetWidth/Height, in that it accounts for padding and border.\ \ The fix is simple, apply the same logic that is applied to offsetWidth/Height to the fallback version if boxSizing is border box.

+1, Given #10679, this is trivial!

Changed December 13, 2011 02:57PM UTC by jzaefferer comment:12

description: This is very similar to #9441, except this is specifically when a child (that has the box-sizing:border-box style) of a hidden div is queried.\ \ Basically, the fallback (that uses the css width/height instead of the javascript offsetWidth/Height to calculate dimensions) is applied, and assumes that the css width doesn't contain padding and border. However, when box-sizing is border-box, the css width is the same as offsetWidth/Height, in that it accounts for padding and border.\ \ The fix is simple, apply the same logic that is applied to offsetWidth/Height to the fallback version if boxSizing is border box.This is very similar to #9441, except this is specifically when a child (that has the box-sizing:border-box style) of a hidden div is queried. \ \ Basically, the fallback (that uses the css width/height instead of the javascript offsetWidth/Height to calculate dimensions) is applied, and assumes that the css width doesn't contain padding and border. However, when box-sizing is border-box, the css width is the same as offsetWidth/Height, in that it accounts for padding and border. \ \ The fix is simple, apply the same logic that is applied to offsetWidth/Height to the fallback version if boxSizing is border box.

Why is the PR closed? Will it be reopened?

Changed December 13, 2011 03:00PM UTC by jzaefferer comment:13

description: This is very similar to #9441, except this is specifically when a child (that has the box-sizing:border-box style) of a hidden div is queried. \ \ Basically, the fallback (that uses the css width/height instead of the javascript offsetWidth/Height to calculate dimensions) is applied, and assumes that the css width doesn't contain padding and border. However, when box-sizing is border-box, the css width is the same as offsetWidth/Height, in that it accounts for padding and border. \ \ The fix is simple, apply the same logic that is applied to offsetWidth/Height to the fallback version if boxSizing is border box.This is very similar to #9441, except this is specifically when a child (that has the box-sizing:border-box style) of a hidden div is queried.\ \ Basically, the fallback (that uses the css width/height instead of the javascript offsetWidth/Height to calculate dimensions) is applied, and assumes that the css width doesn't contain padding and border. However, when box-sizing is border-box, the css width is the same as offsetWidth/Height, in that it accounts for padding and border.\ \ The fix is simple, apply the same logic that is applied to offsetWidth/Height to the fallback version if boxSizing is border box.

+1

Changed December 13, 2011 04:16PM UTC by jaubourg comment:14

+1

Changed December 13, 2011 06:18PM UTC by dmethvin comment:15

description: This is very similar to #9441, except this is specifically when a child (that has the box-sizing:border-box style) of a hidden div is queried.\ \ Basically, the fallback (that uses the css width/height instead of the javascript offsetWidth/Height to calculate dimensions) is applied, and assumes that the css width doesn't contain padding and border. However, when box-sizing is border-box, the css width is the same as offsetWidth/Height, in that it accounts for padding and border.\ \ The fix is simple, apply the same logic that is applied to offsetWidth/Height to the fallback version if boxSizing is border box.This is very similar to #9441, except this is specifically when a child (that has the box-sizing:border-box style) of a hidden div is queried. \ \ Basically, the fallback (that uses the css width/height instead of the javascript offsetWidth/Height to calculate dimensions) is applied, and assumes that the css width doesn't contain padding and border. However, when box-sizing is border-box, the css width is the same as offsetWidth/Height, in that it accounts for padding and border. \ \ The fix is simple, apply the same logic that is applied to offsetWidth/Height to the fallback version if boxSizing is border box.

+1, Good thing I voted up on #10679 then.

Changed December 14, 2011 02:35PM UTC by timmywil comment:16

-1, I don't think we should be concerned with box-sizing in dimensions. padding/border/margin are still determined manually as always.

Changed December 15, 2011 03:31AM UTC by mikesherov comment:17

timmywil, it's reporting the WRONG values as per the documentation. .width says it always returns content width regardless of box-sizing. This bug is about that not being true if it's a box-sizing:border-box child.

Changed December 15, 2011 03:07PM UTC by timmywil comment:18

OK, if it's the wrong value, it is a bug worth fixing. I see the point about animation as well, but .width() should continue to retrieve width regardless of box-sizing.

Changed December 19, 2011 05:29PM UTC by rwaldron comment:19

+1, If it's a bug, then fix it.

Changed January 18, 2012 12:15AM UTC by mikesherov comment:20

milestone: None1.8

Changed April 06, 2012 11:00PM UTC by mikesherov comment:21

#11565 is a duplicate of this ticket.

Changed May 13, 2012 04:53PM UTC by dmethvin comment:22

resolution: → fixed
status: assignedclosed

Changed May 16, 2012 06:04PM UTC by Mike Sherov comment:23

Fix #10413, #10679. Fix box-sizing:border-box and add css vendor prefix support.

Changeset: 5376a809c0d2bee4b7872847c2821e458dfdcc3b