Ticket #8443 (closed bug: cantfix)
outerWidth(true) returns wrong values in IE9 and Safari
| Reported by: | manciaux@… | Owned by: | mikesherov |
|---|---|---|---|
| Priority: | high | Milestone: | 1.7.2 |
| Component: | dimensions | Version: | 1.5.1 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
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>
Change History
comment:2 Changed 2 years ago by rwaldron
- Priority changed from undecided to high
- Resolution set to duplicate
- Status changed from new to closed
- Component changed from unfiled to dimensions
comment:4 Changed 2 years ago by rwaldron
- Status changed from closed to reopened
- Resolution duplicate deleted
comment:5 Changed 2 years ago by rworth
comment:7 Changed 20 months ago by mikesherov
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.
comment:8 Changed 19 months ago by mikesherov
- Owner set to mikesherov
- Status changed from open to assigned
- Milestone changed from 1.next to 1.7.2
still borked in IE9. I'm on it.
comment:9 Changed 19 months ago by mikesherov
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.
comment:10 Changed 19 months ago by mikesherov
this is now fixed to behave like IE9 in webkit proper: https://bugs.webkit.org/show_bug.cgi?id=73334
comment:11 Changed 19 months ago by mikesherov
Update: also in touch with Opera to get this resolved: https://twitter.com/#!/mikesherov/status/145180476628410370
comment:12 Changed 18 months ago by mikesherov
- Status changed from assigned to closed
- Resolution set to cantfix
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!
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
example at http://jsfiddle.net/pyeNX/1/