JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css">
<b>In Safari 5.0</b> computed marginRight value is incorrect for #inner element, when both #inner and #outer elements have width specified in CSS.
<br><br>
<ul>
<li><b>$("#element").outerWidth(true)</b> returns wrong value</li>
<li><b>$("#element").css("marginRight")</b> returns wrong value</li>
<li style="color:red"><b>jQuery.support.reliableMarginRight</b> is true in Safari 5.0, but should be false</li>
</ul>
<br>
The <b>jQuery.support.reliableMarginRight</b> is calculated incorrectly, see code here <a href="https://github.com/jquery/jquery/blob/master/src/support.js#L152">support.js#L152</a>.
It doesn't work, because div is appended to document fragment, not the document.body. If div is added to document.body before calculations, then jQuery.support.reliableMarginRight will be correctly set to false in Safari 5.0.
<br><br>
<div id="outer">
<div id="inner">inner div</div>
</div>
<br>
<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
CSS
#inner {
width: 100px;
margin: 0px;
/* Possible fixes: */
/* display: inline-block;*/
/* float: left;*/
}
#outer {
width: 150px;
}
/* non essential styles, just to visualise elements */
#inner {
height: 50px;
background: #ddd;
}
#outer {
border: 1px solid blue;
}
JavaScript
var inner = $("#inner");
test("outerWidth(true) is incorrect, see related #8443", function() {
expect(1);
equal(parseInt(inner.outerWidth(true), 10), inner.width());
});
test("css('marginRight') is incorrect, see related #3333", function() {
expect(1);
equal(parseInt(inner.css("marginRight"), 10), 0);
});
if (jQuery.browser.webkit && "533" == jQuery.browser.version.replace(/\..*/,'')) {
test("jQuery.support.reliableMarginRight should be false in Safari 5.0", function() {
expect(1);
equal(jQuery.support.reliableMarginRight, false);
});
}