title: I think I found a bug in WebKit (or jQuery), can others confirm?
body: <p>I believe I have found a bug in WebKit. It involves outerWidth(true) (and I assume outerHeight(true) ) in jQuery.</p>
  
  <p>In every browser but Safari and Chrome, the third box is 200. In Safari and Chrome, it is (almost) the width of my screen.</p>
  
  <p>Click <a href="http://x3non.com/image/alec/147/outerWidth%20true%20fail.png" rel="nofollow noreferrer">here</a> to see my results:
  <a href="https://i.stack.imgur.com/2hhdH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2hhdH.png" alt="inline image not found."></a><br>
  <sub>(source: <a href="http://x3non.com/image/alec/147/outerWidth%20true%20fail.png" rel="nofollow noreferrer">x3non.com</a>)</sub>  </p>
  
  <p>You can test is for yourself here: <a href="http://ramblingwood.com/sandbox/webkit-bug/test.html" rel="nofollow noreferrer">http://ramblingwood.com/sandbox/webkit-bug/test.html</a></p>
  
  <p>I used this test file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;style type="text/css"&gt;
      input {
        width: 50%;
        height: 1em;
        font-size: 1em;
      }
   #testBox {margin-left:100px;width:100px;}
   #testBox2 {padding-left:100px;width:100px;}
   #testBox3 {border-left:100px black solid;width:100px;}
    &lt;/style&gt;
    &lt;script type="text/javascript"&gt;
      function init(){
        $('#w1').val($('#testBox').width());
        $('#ow1').val($('#testBox').outerWidth());
        $('#owt1').val($('#testBox').outerWidth(true));
        $('#w2').val($('#testBox2').width());
        $('#ow2').val($('#testBox2').outerWidth());
        $('#owt2').val($('#testBox2').outerWidth(true));
        $('#w3').val($('#testBox3').width());
        $('#ow3').val($('#testBox3').outerWidth());
        $('#owt3').val($('#testBox3').outerWidth(true));
      }
      $(document).ready(function(){
        init();
  
        $(window).resize(function(){
          init();
        });
      });
    &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div id="testBox"&gt;test&lt;/div&gt;
    &lt;p&gt;width() &lt;input type="text" id="w1" /&gt;&lt;/p&gt;
    &lt;p&gt;outerWidth() &lt;input type="text" id="ow1" /&gt;&lt;/p&gt;
    &lt;p&gt;outerWidth(true) &lt;input type="text" id="owt1" /&gt;&lt;/p&gt;
  
   &lt;div id="testBox2"&gt;test2&lt;/div&gt;
    &lt;p&gt;width() &lt;input type="text" id="w2" /&gt;&lt;/p&gt;
    &lt;p&gt;outerWidth() &lt;input type="text" id="ow2" /&gt;&lt;/p&gt;
    &lt;p&gt;outerWidth(true) &lt;input type="text" id="owt2" /&gt;&lt;/p&gt;
  
   &lt;div id="testBox3"&gt;test3&lt;/div&gt;
    &lt;p&gt;width() &lt;input type="text" id="w3" /&gt;&lt;/p&gt;
    &lt;p&gt;outerWidth() &lt;input type="text" id="ow3" /&gt;&lt;/p&gt;
    &lt;p&gt;outerWidth(true) &lt;input type="text" id="owt3" /&gt;&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>