Home/ Questions/Q 373007
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T14:15:57+00:00

I believe I have found a bug in WebKit. It involves outerWidth(true) (and I

  • 0

I believe I have found a bug in WebKit. It involves outerWidth(true) (and I assume outerHeight(true) ) in jQuery.

In every browser but Safari and Chrome, the third box is 200. In Safari and Chrome, it is (almost) the width of my screen.

Click here to see my results:
inline image not found.
(source: x3non.com)

You can test is for yourself here: http://ramblingwood.com/sandbox/webkit-bug/test.html

I used this test file:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <style type="text/css">
    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;}
  </style>
  <script type="text/javascript">
    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();
      });
    });
  </script>

</head>
<body>
 <div id="testBox">test</div>
  <p>width() <input type="text" id="w1" /></p>
  <p>outerWidth() <input type="text" id="ow1" /></p>
  <p>outerWidth(true) <input type="text" id="owt1" /></p>

 <div id="testBox2">test2</div>
  <p>width() <input type="text" id="w2" /></p>
  <p>outerWidth() <input type="text" id="ow2" /></p>
  <p>outerWidth(true) <input type="text" id="owt2" /></p>

 <div id="testBox3">test3</div>
  <p>width() <input type="text" id="w3" /></p>
  <p>outerWidth() <input type="text" id="ow3" /></p>
  <p>outerWidth(true) <input type="text" id="owt3" /></p>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Chrome’s DOM inspector confirms that this is a WebKit issue; the div gets a large right margin, even if you try to override margin-right. Some things that force the margin to be calculated correctly include float: left and display: inline-block. Also if you put the div inside of another sized div, its outerWidth(true) will give the innerWidth of the containing div, which could be a useful real-world workaround — just wrap it in a div with margin: 0; padding: 0; width: XXX.

    • 0