¿El ancho de WebKit no se actualiza?

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

Pregunta

Tengo un código que se ejecuta en el cambio de tamaño de la ventana. Estoy extrayendo el width y el outerWidth de un elemento de texto de entrada.

Este proceso funciona bien en todos los navegadores, excepto Webkit, que devuelve el resultado adecuado de outerWidth , pero el resultado de width nunca cambia del original en carga.

Este es el resultado real de la consola de mi script al cambiar el tamaño de la ventana del navegador (Esto es Chrome, pero lo mismo ocurre en 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

¿Alguien ha experimentado esto antes? ¿Sabes por qué sucede? Y lo más importante, ¿sabes cómo solucionarlo? :)

Gracias.

¿Fue útil?

Solución

Aquí está mi caso de prueba. Ambos parecen funcionar como se esperaba (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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top