Side navigation
#10639 closed bug (fixed)
Opened November 02, 2011 06:12PM UTC
Closed December 07, 2011 01:37AM UTC
Last modified July 12, 2012 09:06PM UTC
outerWidth(true) and css('margin') returning % instead of px in Webkit
| Reported by: | Sprenger | Owned by: | mikesherov |
|---|---|---|---|
| Priority: | high | Milestone: | 1.7.2 |
| Component: | css | Version: | 1.6.4 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
If you have a relative margin (defined in %), jQuery(element).css('margin-right') will normally return the margin value in pixels not in percentage. In Webkit, this is not the case.
The method jQuery(element).outerWidth returns in IOS5 the addition of width (pixel) and margin (percentage) which mixes two different measures.
Test file: http://www.chateau-web.ch/demo/ios5-jquery-2.html
Tested with 1.6.4 and v1.7 (git) and 1.5. (same values for all versions)
Attachments (0)
Change History (16)
Changed November 05, 2011 09:50PM UTC by comment:1
| component: | unfiled → css |
|---|---|
| description: | If you have a relative margin (defined in %), jQuery(element).css('margin-right') will normally return the margin value in pixels not in percentage. In iOS5, this is not the case. \ \ The method jQuery(element).outerWidth returns in IOS5 the addition of width (pixel) and margin (percentage) which mixes two different measures. \ \ Test file: http://www.chateau-web.ch/demo/ios5-jquery-2.html \ \ Tested with 1.6.4 and v1.7 (git) and 1.5. (same values for all versions) → If you have a relative margin (defined in %), jQuery(element).css('margin-right') will normally return the margin value in pixels not in percentage. In Webkit, this is not the case. \ \ The method jQuery(element).outerWidth returns in IOS5 the addition of width (pixel) and margin (percentage) which mixes two different measures. \ \ Test file: http://www.chateau-web.ch/demo/ios5-jquery-2.html \ \ Tested with 1.6.4 and v1.7 (git) and 1.5. (same values for all versions) |
| milestone: | None → 1.next |
| priority: | undecided → high |
| status: | new → open |
| summary: | outerWidth(true) and css('margin') returning % instead of px on iOS5 → outerWidth(true) and css('margin') returning % instead of px in Webkit |
Changed November 21, 2011 02:29AM UTC by comment:2
chrome and FF are fundamentally different in how they report computed values. :-\\
Changed November 21, 2011 01:30PM UTC by comment:3
Unfortunately, it **looks** like a "wait for webkit to fix this" situation. The hack in the provided fiddle assumes that the parent is a pixel width element. In order to correctly work around the chrome bug, we would have to perform a russian doll approach, continuing to go up the tree correcting and coenverting all the way up the DOM, possibly until we're measuring the document's width/height until we get a sane value. I'm not sure jQuery wants to support that, but that's just my two cents.
Here are some resources related to this bug.
- Currently open bug in webkit regarding using "computed values" instead of "used value": https://bugs.webkit.org/show_bug.cgi?id=29084
- used value article from MDN: https://developer.mozilla.org/en/CSS/used_value
- YUI bug report for the same thing that is essentially a tumbleweed: http://yuilibrary.com/projects/yui3/ticket/2529799
Changed November 21, 2011 11:00PM UTC by comment:4
I advocated for the bug on the chrome bugzilla: https://bugs.webkit.org/show_bug.cgi?id=29084
Anyone else feel like pitching in an opinion?
Changed November 22, 2011 12:05AM UTC by comment:5
Gaining some traction to be fixed in webkit: https://bugs.webkit.org/show_bug.cgi?id=29084
Changed November 22, 2011 01:55PM UTC by comment:6
found a better hack... still working out the kinks.
Changed November 23, 2011 01:27PM UTC by comment:7
https://github.com/jquery/jquery/pull/616 Still some potential perf issues to work out.
Changed November 24, 2011 02:16PM UTC by comment:8
By the way, as an aside, open this fiddle in IE9,FF,0< or Webkit, they all report different values. getComputedStyle() and margins aren't friends: http://jsfiddle.net/u4F8m/13/
Changed November 26, 2011 06:50PM UTC by comment:9
I've updated the PR, still pretty slow when this situation is encountered, but fast otherwise: https://github.com/jquery/jquery/pull/616
Changed November 28, 2011 02:34AM UTC by comment:10
#10117 is a duplicate of this ticket.
Changed November 28, 2011 02:36AM UTC by comment:11
| milestone: | 1.next → 1.7.2 |
|---|---|
| owner: | → mikesherov |
| status: | open → assigned |
Changed December 01, 2011 03:52AM UTC by comment:12
Just an update, this is going to be fixed in chrome itself, but this hack may still be necessary for older safari. https://twitter.com/#!/jarrednicholls/status/142049583915204608
Changed December 07, 2011 01:37AM UTC by comment:13
Changed December 28, 2011 08:29PM UTC by comment:14
I've left a comment on the commit on GitHub because I'm not allowed to comment here. Fixing percentages in WebKit could be more robust.
Changed July 12, 2012 07:09PM UTC by comment:15
Strangely, if an element has css 'min-width' value and a css margin value that is a %, in Safari (Version 5.1.7 (7534.57.2)), the returned value for $(element) is the 'min-width' value!
Changed July 12, 2012 09:06PM UTC by comment:16
ntnwrd@gmail.com, please submit a new bug for that as its a different bug, please.
Confirmed. Probably related to the effects percentage issue.
Test case ported to jsfiddle: http://jsfiddle.net/timmywil/u4F8m/