Side navigation
#8443 closed bug (cantfix)
Opened March 04, 2011 10:26PM UTC
Closed December 19, 2011 02:48AM UTC
Last modified March 14, 2012 12:48PM UTC
outerWidth(true) returns wrong values in IE9 and Safari
| Reported by: | manciaux@corelogic.com | Owned by: | mikesherov |
|---|---|---|---|
| Priority: | high | Milestone: | 1.7.2 |
| Component: | dimensions | Version: | 1.5.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
This is the same problem as ticket 3092 - which was closed some time ago.
When calculating outerWidth(true) in IE9 and Safari, the value returned is the width + margin implied from the "margin:auto" property
Works correctly in IE & Firefox.
The discrepancy happens when
- the outer div is floated,
- the inner div has the width set (smaller than the outer div)
- the inner div has style="margin:auto"
<%@ Page Language="c#" CodeBehind="test1.aspx.cs" AutoEventWireup="True" Inherits="SonicEagle.BrokerAchieve.Errorhandler.test1" %>
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "http:www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test1</title>
<script src="/common/jquery/jquery.js" type="text/javascript"></script>
</head>
<body>
<div style="border:1px solid red;width:200px;float:left;">
<div style="width: 100px; display: block;border:1px solid blue;margin: 0px auto;" class="xinner" >
inner div
</div>
</div>
<input type="button" onclick="test()" />
<div id="results" style="padding-top:30px;">
</div>
<script type="text/javascript">
function test() {
$("#results").html('$(".xinner").outerWidth(true): ' + $(".xinner").outerWidth(true));
}
$(document).ready(test);
</script>
</body>
</html>
Attachments (0)
Change History (12)
Changed March 04, 2011 10:51PM UTC by comment:1
Changed March 06, 2011 11:47PM UTC by comment:2
| component: | unfiled → dimensions |
|---|---|
| priority: | undecided → high |
| resolution: | → duplicate |
| status: | new → closed |
Changed March 24, 2011 03:35PM UTC by comment:4
| resolution: | duplicate |
|---|---|
| status: | closed → reopened |
Changed March 24, 2011 03:46PM UTC by comment:5
Changed March 30, 2011 07:15PM UTC by comment:6
| status: | reopened → open |
|---|
Confirmed.
Changed October 18, 2011 12:44PM UTC by comment:7
this seems to be working as expected in Safari 5.1 using this fiddle: http://jsfiddle.net/pyeNX/1/
I don't have IE9 handy, so I can't tell if it's still broken there.
Changed November 28, 2011 02:28AM UTC by comment:8
| milestone: | 1.next → 1.7.2 |
|---|---|
| owner: | → mikesherov |
| status: | open → assigned |
still borked in IE9. I'm on it.
Changed December 03, 2011 07:14PM UTC by comment:9
For the record here, IE9 is right. See the discussion here for more info: https://bugs.webkit.org/show_bug.cgi?id=73334
I've pinged FF: https://bugzilla.mozilla.org/show_bug.cgi?id=381328 and I'm going to ping Opera about fixing this in their browsers.
Changed December 07, 2011 03:45AM UTC by comment:10
this is now fixed to behave like IE9 in webkit proper: https://bugs.webkit.org/show_bug.cgi?id=73334
Changed December 09, 2011 04:46PM UTC by comment:11
Update: also in touch with Opera to get this resolved: https://twitter.com/#!/mikesherov/status/145180476628410370
Changed December 19, 2011 02:48AM UTC by comment:12
| resolution: | → cantfix |
|---|---|
| status: | assigned → closed |
closing this ticket as cantfix as really there is nothing we can do to fix this here. What remains is for FF and Opera to implement the correct behavior as per the spec, and there really is no way to fix this in jQuery.
I've done what I can to advocate for a fix, please continue to advocate for it as well. Thanks for the bug report, please continue to track the issue with the links I provided above!
example at http://jsfiddle.net/pyeNX/1/