Bug Tracker

Ticket #10639 (closed bug: fixed)

Opened 3 years ago

Last modified 2 years ago

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:
Blocking: Blocked by:

Description (last modified by timmywil) (diff)

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)

Change History

comment:1 Changed 3 years ago by timmywil

  • Status changed from new to open
  • Description modified (diff)
  • Component changed from unfiled to css
  • Summary changed from outerWidth(true) and css('margin') returning % instead of px on iOS5 to outerWidth(true) and css('margin') returning % instead of px in Webkit
  • Priority changed from undecided to high
  • Milestone changed from None to 1.next

Confirmed. Probably related to the effects percentage issue.

Test case ported to jsfiddle:  http://jsfiddle.net/timmywil/u4F8m/

comment:2 Changed 3 years ago by mikesherov

chrome and FF are fundamentally different in how they report computed values. :-\

comment:3 Changed 3 years ago by mikesherov

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.

comment:4 Changed 3 years ago by mikesherov

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?

comment:5 Changed 3 years ago by mikesherov

Gaining some traction to be fixed in webkit:  https://bugs.webkit.org/show_bug.cgi?id=29084

comment:6 Changed 3 years ago by mikesherov

found a better hack... still working out the kinks.

comment:7 Changed 3 years ago by mikesherov

 https://github.com/jquery/jquery/pull/616 Still some potential perf issues to work out.

comment:8 Changed 3 years ago by mikesherov

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/

comment:9 Changed 3 years ago by mikesherov

I've updated the PR, still pretty slow when this situation is encountered, but fast otherwise:  https://github.com/jquery/jquery/pull/616

comment:10 Changed 3 years ago by mikesherov

#10117 is a duplicate of this ticket.

comment:11 Changed 3 years ago by mikesherov

  • Owner set to mikesherov
  • Status changed from open to assigned
  • Milestone changed from 1.next to 1.7.2

comment:12 Changed 3 years ago by mikesherov

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  https://bugs.webkit.org/show_bug.cgi?id=73334

comment:13 Changed 3 years ago by Mike Sherov

  • Status changed from assigned to closed
  • Resolution set to fixed

Fix #10639. Make percent-specified margins return px values in WebKit.

Changeset: 7f6a991313380b74d5fb18782fb6b99fd6c4a22d

comment:14 Changed 3 years ago by heygrady

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.

comment:15 Changed 2 years ago by ntnwrd@…

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!

 http://jsfiddle.net/E2U5C/6/

comment:16 Changed 2 years ago by mikesherov

ntnwrd@…, please submit a new bug for that as its a different bug, please.

Note: See TracTickets for help on using tickets.