Side navigation
#3333 closed bug (fixed)
Opened September 05, 2008 03:25PM UTC
Closed March 24, 2011 10:58PM UTC
Last modified April 12, 2012 11:28AM UTC
.css("marginRight") is incorrect in WebKit
Reported by: | soldair | Owned by: | rworth |
---|---|---|---|
Priority: | blocker | Milestone: | 1.5.2 |
Component: | dimensions | Version: | 1.5 |
Keywords: | needsreview | Cc: | soldair |
Blocked by: | Blocking: |
Description
in safari (win) and google chrome (only included because the same error occurs and both use webkit)
a call to $("#element").outerWidth({margin:true}) reports the value of parent.innerWidth()
this bug does not happen in any other browser tested
ie6,firefox3,opera9.5,konqueror (tested because khtml is the webkit base)
Attachments (6)
Change History (23)
Changed September 05, 2008 03:40PM UTC by comment:1
cc: | → soldair |
---|---|
component: | core → dimensions |
owner: | → brandon |
Changed October 27, 2010 11:06PM UTC by comment:2
owner: | brandon → soldair |
---|---|
status: | new → pending |
Please provide a distilled and reduced jsFiddle test case, thanks!
Changed November 11, 2010 11:09PM UTC by comment:3
status: | pending → closed |
---|
Automatically closed due to 14 days of inactivity.
Changed December 06, 2010 02:55PM UTC by comment:4
*bump*
Still broken, (os x 10.6 Safari 5.0.4)
Changed December 06, 2010 03:28PM UTC by comment:7
milestone: | 1.3 → 1.4.5 |
---|---|
priority: | major → high |
status: | closed → reopened |
version: | 1.2.6 → 1.4.4 |
test case. It looks like actually the value of margin-right in webkit/chrome is borked.
Changed December 06, 2010 03:28PM UTC by comment:8
status: | reopened → open |
---|
Changed January 25, 2011 05:26AM UTC by comment:9
That's actually the way webkit handles display: block (as in divs). If something needs that property, it means put it on a line by itself. All browsers do this by giving the element (let's call it element A) full width so that it spans the full width of the element it is relative to in order to knock its next sibling down below, which we've all probably noticed when hovering over an H1 or something in web inspector/firebug and saw that it spanned the whole window. However, if you specify a width for element A, browsers need to do something else. The solution webkit chose was give it the necessary margin on the right to accomplish the same thing, regardless of whether the user specifies a margin-right because it ''usually'' won't matter style-wise if it's display block and all proceeding elements go below.
There is an addendum. If the element is display: block; margin-right: 3px; AND float: left; the element MUST keep its margin. You will see that if you add float: left to your #inner in the test case above, you will get the correct outerWidth. This is not a jQuery bug, but a choice on how to implement display: block in webkit.
Regardless, a possible solution would be to float the element in any direction just long enough to get the correct margins, then put it back to what it was before. I went ahead and made a pull request that utilizes swap in getWH in css.js, and added a test in the dimensions component.
Changed February 08, 2011 04:09PM UTC by comment:10
#8207 is a duplicate of this ticket.
Changed February 08, 2011 04:24PM UTC by comment:11
version: | 1.4.4 → 1.5 |
---|
Changed February 22, 2011 02:38PM UTC by comment:12
_comment0: | I think the issue I'm working on relates to this. https://github.com/jboesch/jquery/commit/bc80f2990741891180d64605d750deaf5cdf9b8c \ \ It's not 100% done, tests pass everywhere except 3 in IE7. Still fixing it up. → 1298385530679355 |
---|
I think the issue I'm working on relates to this. #4146
https://github.com/jboesch/jquery/commit/bc80f2990741891180d64605d750deaf5cdf9b8c
It's not 100% done, tests pass everywhere except 3 in IE7. Still fixing it up.
Changed February 26, 2011 09:22PM UTC by comment:13
_comment0: | I landed a patch for ticket #4146 which I believe addresses this bug as well: \ http://bugs.jquery.com/ticket/4146 \ \ https://github.com/jquery/jquery/pull/251/files → 1298836236985583 |
---|---|
_comment1: | I landed a fix for ticket #4146 which I believe addresses this bug as well: \ http://bugs.jquery.com/ticket/4146 \ \ https://github.com/jquery/jquery/pull/253/files → 1298836315547006 |
I landed a fix for ticket #4146 which I believe fixes this bug as well:
Changed March 24, 2011 03:22PM UTC by comment:14
_comment0: | I belive this issue is WebKit only and fixed in nightlies since Feb 2011 \ \ webkit bug: https://bugs.webkit.org/show_bug.cgi?id=13343 \ chromium bug: http://code.google.com/p/chromium/issues/detail?id=23816 \ \ pure JS test case: http://jsfiddle.net/rdworth/XMgur/2/ \ jQuery 1.5.1 test case: http://jsfiddle.net/rdworth/JWqAK/1/ → 1300980515793048 |
---|
I belive this issue is WebKit only and fixed in nightlies since Feb 2011
- webkit bug: https://bugs.webkit.org/show_bug.cgi?id=13343
- chromium bug: http://code.google.com/p/chromium/issues/detail?id=23816
- pure JS test case: http://jsfiddle.net/rdworth/XMgur/2/
- jQuery 1.5.1 test case: http://jsfiddle.net/rdworth/JWqAK/1/
Changed March 24, 2011 03:25PM UTC by comment:15
Changed March 24, 2011 03:29PM UTC by comment:16
This issue is blocking a regression in jQuery UI 1.8.11 http://bugs.jqueryui.com/ticket/7084
Changed March 24, 2011 03:31PM UTC by comment:17
The best workaround I've found is to set display:inline-block on the element temporarily in order to get the correct computed margin-right value. Though I've only tested so far in Safari 5 on Windows.
- Demo of workaround: http://jsfiddle.net/rdworth/bRyDW/
Changed March 24, 2011 03:44PM UTC by comment:18
cc: | soldair |
---|---|
keywords: | outerWidth → needsreview |
milestone: | 1.next → 1.5.2 |
priority: | high → blocker |
Changed March 24, 2011 03:46PM UTC by comment:19
cc: | → soldair |
---|
Changed March 24, 2011 06:28PM UTC by comment:20
owner: | soldair |
---|---|
status: | open → assigned |
summary: | jquery outerWidth reports incorrect value in saffari (3.1.2 win) and google chrome → .css("marginRight") is incorrect in WebKit |
Changed March 24, 2011 06:29PM UTC by comment:21
owner: | → rworth |
---|
Changed March 24, 2011 10:58PM UTC by comment:22
Changed April 12, 2012 11:28AM UTC by comment:23
related: http://bugs.jquery.com/ticket/11584