WebKit width not updating?

views:

416

answers:

+1 Q:

WebKit width not updating?

I have a piece of code which runs on window resize. I am pulling the width, and the outerWidth of a input text element.

This process works fine in every browser, except Webkit, which returns the proper result from outerWidth, but the result from width never changes from the on load original.

This is actual console output from my script when resizing the browser window (This is Chrome, but the same happens in Safari 4):

outerWidth: 772
width: 772
outerWidth: 773
width: 772
outerWidth: 773
width: 772
outerWidth: 794
width: 772
outerWidth: 794
width: 772
outerWidth: 815
width: 772
outerWidth: 815
width: 772
outerWidth: 820
width: 772
outerWidth: 837
width: 772

Has anyone experienced this before? Do you know why it happens? And most importantly, do you know how to work around it? :)

Thank you.

Here is my test case. Both seem to work as expected (Safari 4).

<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"&gt;&lt;/script&gt;
  <style type="text/css">
    input {
      width: 50%;
      height: 2em;
      font-size: 1em;
    }
  </style>
</head>
<body>
  <p>
    <input type="text" id="w" />
  </p>
  <p>
    <input type="text" id="ow" />
  </p>
  <script type="text/javascript">
    function init(){
      $('#w').val($('#w').width());
      $('#ow').val($('#ow').outerWidth());
    }
    $(function(){
      init();

      $(window).resize(function(){
        init();
      });
    });
  </script>
</body>
</html>

tom 2009-08-02 17:04:48

Works great in Safari 4. Older jQuery version perhaps?

Al 2009-08-02 17:09:02

ansaurus

tags:

views:

answers:

WebKit width not updating?

related questions