JQuery.height () behaves differently in WebKit and Firefox when using window size: border-box

Question

I have a text box with the following style:

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

If I then run the following javascript / jquery code, the height of my textarea will be halved using Safari (5.0.6) and Chrome (16.0.x):

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

According to jQuery docs for .height (), this is the expected behavior, because .hight () returns the height of the content (no fill, border), regardless of the window size property, but .hight (value) sets the content size taking into account the box- property sizing. Therefore, if my textarea has content-height: 17px and padding-height: 15px, .height () will return 17px. Then, if I installed .height (17), my text area, which used to be 32px, now only has a height of 17px.

My real application uses jQuery.fn.autoResize 1.14 ( https://github.com/padolsey/jQuery.fn.autoResize ) on text areas that apply window size. This code pulls a similar trick to what I described above.

It works fine in FireFox 10. (That is, FireFox takes into account the size of the window more symmetrically when getting and adjusting the height.)

My question is: where is the error, and where should I look for / suggest a workaround? JQuery.fn.autoResize plugin, jQuery, webkit or firefox command?

Answer 1

A bug in jQuery ( http://bugs.jquery.com/ticket/11004 ), which makes $(el).height() not a box-sizing property. The fix is ​​planned to be released in version 1.8, but at the same time, you can use $(el).outerHeight() to get the height of the field, taking into account the filling and border ( http://api.jquery.com/outerHeight/ ).

Answer 2

Error in jQuery calculations.

Decision:

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

If you have borders - also calculate them