Webkit treats form fields just like every other element and when both left and right are set, it stretches them horizontally to satisfy both declarations. However this, convenient as it may be, is opposed to both what every other engine is doing AND the specification: "The used value of ‘width’ and ‘height’ is determined as for inline replaced elements." From http://www.w3.org/TR/css3-box/#abs-replaced A blog post describing this issue: http://snook.ca/archives/html_and_css/absolute-position-textarea It also happens with inputs: http://jsfiddle.net/leaverou/PTxSE/4/show But not all replaced elements: http://jsfiddle.net/leaverou/PTxSE/3/show It also doesn't happen with top/bottom, only left/right: http://jsfiddle.net/leaverou/PTxSE/5/show I also tested on Windows, and it's reproducible there as well.
Your test case for top/bottom does show the same behavior for top/bottom, it’s just not particularly visible because the height of the body element is only slightly larger than the textarea. If you increase the height of the body, either explicitly via height: 100% or by adding content to the element, then you’ll see the height of the textarea follow.
I believe this is solved…
Safari and Chrome agree on behavior. Firefox does not match.
<rdar://problem/96913549>