La larghezza di WebKit non si aggiorna?

StackOverflow https://stackoverflow.com/questions/1219170

Domanda

Ho un pezzo di codice che gira sul ridimensionamento della finestra. Sto estraendo il width e il outerWidth di un elemento di testo di input.

Questo processo funziona bene in tutti i browser, ad eccezione di Webkit, che restituisce il risultato corretto da outerWidth , ma il risultato da width non cambia mai dall'originale al caricamento.

Questo è l'output effettivo della console dal mio script durante il ridimensionamento della finestra del browser (questo è Chrome, ma lo stesso accade 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

Qualcuno l'ha già sperimentato? Sai perché succede? E, soprattutto, sai come aggirare il problema? :)

Grazie.

È stato utile?

Soluzione

Ecco il mio caso di test. Entrambi sembrano funzionare come previsto (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"></script>
  <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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top