jQuery.height() se comporta de manera diferente en WebKit y Firefox cuando se utiliza una caja de tamaño: frontera-box

Question

Tengo un área de texto con el siguiente estilo aplicado:

textarea { 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
} 

Si a continuación, ejecute el siguiente código JavaScript/jQuery , altura de mi área de texto se reduce a la mitad el uso de Safari (5.0.6) y Chrome (16.0.x):

$('textarea').each(function() { 
    var $this = $(this); 
    $this.height($this.height()); 
} 

de acuerdo con la documentación de jQuery para .height(), este es el comportamiento esperado porque .height () devuelve la altura del contenido (sin relleno, borde), independientemente de la propiedad de tamaño de caja, pero .height (valor) establece la contenido tamaño que representa la propiedad de tamaño de caja. Entonces, si mi área de texto tiene contenido-altura: 17px y altura de relleno: 15px, .height() devolverá 17px. Entonces, si configuro .height (17), mi área de texto que solía tener 32 px de alto ahora solo tiene 17 px de alto.

Mi aplicación en el mundo real está utilizando jQuery.fn.autoResize 1.14 (https://github.com/padolsey/jQuery.fn.autoResize) en áreas de texto que tienen tamaño de caja aplicado. Ese código tira un truco similar a lo que he descrito anteriormente.

Funciona bien en Firefox 10. (Es decir, las cuentas de FireFox para la caja-dimensionamiento de una manera más simétrica cuando la obtención y configuración de altura.)

Mi pregunta es: ¿Dónde está el error, y dónde debo buscar/proponer una solución alternativa? El complemento jQuery.fn.autoResize, el equipo jQuery, el kit web o FireFox?

Answer 1

El error está en jQuery (http://bugs.jquery.com/ticket/11004) que hace $(el).height() no dar cuenta de la propiedad box-sizing. La solución está programada para salir en v1.8, sin embargo, mientras tanto, puede usar $(el).outerHeight() para obtener la altura de la caja que representa el relleno y el borde (http://api.jquery.com/outerHeight/).

Answer 2

Error en los cálculos de jQuery.

Solución:

var height = $this.outerHeight() - Number($this.css('padding-top').split('px')[0]) - Number($this.css('padding-bottom').split('px')[0]); 

Si tiene fronteras - calcular también los