La largeur de WebKit n'est pas mise à jour?

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

Question

J'ai un morceau de code qui tourne sur le redimensionnement de la fenêtre. Je tire les éléments width et outerWidth d'un élément de texte en entrée.

Ce processus fonctionne correctement dans tous les navigateurs, à l'exception de Webkit, qui renvoie le résultat approprié de outerWidth , mais le résultat de width ne change jamais par rapport à l'original au chargement.

Il s'agit de la sortie actuelle de la console de mon script lors du redimensionnement de la fenêtre du navigateur (il s'agit de Chrome, mais il en va de même dans 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

Quelqu'un en at-il déjà fait l'expérience? Savez-vous pourquoi cela se produit? Et surtout, savez-vous comment contourner le problème? :)

Merci.

Était-ce utile?

La solution

Voici mon cas de test. Les deux semblent fonctionner comme prévu (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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top