32731 2009-12-18 12:20:56 -0800 Set the <textarea> baseline on the baseline of the textarea's first line 2020-05-01 10:02:44 -0700 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) Mac (Intel) OS X 10.6 NEW P3 Normal --- 1 aaron robert ap cory lizmitchell niall.smart robert oldest_to_newest 173262 0 45172 aaron 2009-12-18 12:20:56 -0800 Created attachment 45172 Demonstration of this bug Place a textarea inside a div. Give it height/width of 100px. The enclosing div's height will be 104px. The textarea is taking up 4px extra space below itself. If you increase font-size, the phantom height also increases — 2em = 8px, 3em = 12px, etc. (If font-size >= 6.969em — no jokes, that's the exact number I arrived at — then you also start to get even MORE phantom height both below AND above the textarea. Watch out for that in testing this bug!) Problem first noticed while working on linked site — observe that there is actually an extra 6px height below the div in this case, not 4px, indicating there's even more strangeness at work here. I can't figure it out. I leave it to smart people. Demonstration attached. 439877 1 niall.smart 2011-07-20 10:59:42 -0700 Reproduced in WebKit nightly r91186 (18th July 2011). To workaround, apply a negative 4 pixel margin. I am attaching a second testcase. 439878 2 101485 niall.smart 2011-07-20 11:00:17 -0700 Created attachment 101485 Test case for incorrect textarea height. 439879 3 niall.smart 2011-07-20 11:00:43 -0700 This bug only occurs in standards mode. 552264 4 cory 2012-02-08 10:29:48 -0800 I confirm that the test case is still applicable in : Macintosh Intel Mac OS X 10.6.8 Safari 5.1.2 (6534.52.7) and Chrome 17.0.963.46 does not occur in IE9, Firefox 10 adds a 2px margin on the bottom. 867108 5 aaron 2013-04-01 07:17:16 -0700 I just got a ping that this has been assigned, and couldn't even remember the original report. Three and a half years later, looking at my example, this is pretty clearly a bad interaction between an inline-block element and its enclosing element's line-height. There are two obvious workarounds: setting textarea to display: block, or setting the enclosing div to line-height: 0. There's probably still a bug here, since setting the div's line-height to 1 should eliminate the space, but doesn't completely; and in Niall's example, the textarea is clearly behaving differently than the input, when they should be behaving identically. But perhaps this additional information will serve to help someone. 868030 6 robert 2013-04-02 10:57:05 -0700 https://developer.mozilla.org/en-US/docs/HTML/HTML_Elements/textarea: "In regards to CSS, an <textarea> is a replaced element. The HTML specification doesn't define where the baseline of a <textarea> is. So different browsers set it to different positions. For Gecko, the <textarea> baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the <textarea> box." In reality we seem to be the odd one out - every other browser sets the baseline on the first line of the textarea and we set it on the bottom. 45172 2009-12-18 12:20:56 -0800 2009-12-18 12:20:56 -0800 Demonstration of this bug phantomspace.html text/html 931 aaron PCFET0NUWVBFIGh0bWwgUFVCTElDICItLy9XM0MvL0RURCBYSFRNTCAxLjAgU3RyaWN0Ly9FTiIg Imh0dHA6Ly93d3cudzMub3JnL1RSL3hodG1sMS9EVEQveGh0bWwxLXN0cmljdC5kdGQiPgo8aHRt bD4KCjxoZWFkPgoJPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCQoJYm9keSB7CgkJbWFyZ2luOiAw OwoJCS8qIEluY3JlYXNlIGZvbnQtc2l6ZSBhbmQgcGhhbnRvbSBzcGFjZSBpbmNyZWFzZXMgKi8K CQlmb250LXNpemU6IDFlbTsKCX0KCQoJdGV4dGFyZWEgewoJCW1hcmdpbjogMHB4OwoJCXBhZGRp bmc6IDBweDsKCQlib3JkZXI6IDBweDsKCQliYWNrZ3JvdW5kOiBncmF5OwoJCXdpZHRoOiAxMDBw eDsKCQloZWlnaHQ6IDEwMHB4OwoJfQoJCgk8L3N0eWxlPgo8L2hlYWQ+Cgo8Ym9keT4KCTxkaXY+ CQoJCTxmb3JtPgoJCQk8IS0tIFRoaXMgPGRpdj4gaXMgMTA0cHggdGFsbCAtLT4KCQkJPGRpdj4K CQkJCTwhLS0gVGhpcyA8dGV4dGFyZWE+IGlzIG9ubHkgMTAwcHggdGFsbCAtLT4KCQkJCTx0ZXh0 YXJlYT50ZXh0IGFyZWE8L3RleHRhcmVhPgoJCQkJPCEtLSBCdWcgcmVzdWx0cyBpbiBibGFuayBz cGFjZSBoZXJlLCBiZWxvdyB0aGUgPHRleHRhcmVhPiBidXQgaW5zaWRlIHRoZSA8ZGl2PiAtLT4K CQkJPC9kaXY+CgkJCTxkaXY+CgkJCQk8dGV4dGFyZWE+dGV4dCBhcmVhPC90ZXh0YXJlYT48dGV4 dGFyZWE+dGV4dCBhcmVhPC90ZXh0YXJlYT5UaGlzIHRleHQgc2hvdWxkIHRvdWNoIHRoZSA8Y29k ZT4mbHQ7dGV4dGFyZWEmZ3Q7PC9jb2RlPiBiZWxvdwoJCQk8L2Rpdj4KCQkJPGRpdj4KCQkJCTx0 ZXh0YXJlYT50ZXh0IGFyZWE8L3RleHRhcmVhPjx0ZXh0YXJlYT50ZXh0IGFyZWE8L3RleHRhcmVh Pjx0ZXh0YXJlYT50ZXh0IGFyZWE8L3RleHRhcmVhPgoJCQk8L2Rpdj4KCQk8L2Zvcm0+Cgk8L2Rp dj4KPC9ib2R5PgoKPC9odG1sPg== 101485 2011-07-20 11:00:17 -0700 2011-07-20 11:00:17 -0700 Test case for incorrect textarea height. textarea.html text/html 1020 niall.smart PCFET0NUWVBFIGh0bWw+CjwhLS0gcmVuZGVycyBPSyBpZiB5b3UgcmVtb3ZlIHRoZSBhYm92ZSBE T0NUWVBFIC0tPgo8aHRtbD4KCjxoZWFkPgoKICA8dGl0bGU+VGV4dGFyZWEgVGVzdDwvdGl0bGU+ CgoKICA8c3R5bGU+CgogICAgICBkaXYgewogICAgICAgICAgYm9yZGVyOiAgICAgMXB4IHNvbGlk IGJsYWNrOwogICAgICAgICAgYmFja2dyb3VuZDogcmVkOwogICAgICAgICAgd2lkdGg6ICAgICAg MjAwcHg7CiAgICAgICAgICBmbG9hdDogICAgICBsZWZ0OwogICAgICAgICAgbWFyZ2luOiAgICAg MXB4OwogICAgICB9CgogICAgICBpbnB1dCwgdGV4dGFyZWEgewogICAgICAgICAgYmFja2dyb3Vu ZDogYmx1ZTsKICAgICAgICAgIG1hcmdpbjogICAgIDA7CiAgICAgICAgICBwYWRkaW5nOiAgICAy cHg7CiAgICAgICAgICBib3JkZXI6ICAgICBub25lOwogICAgICAgICAgaGVpZ2h0OiAgICAgMTAw cHg7CiAgICAgICAgICB3aWR0aDogICAgICAxODhweDsKICAgICAgICAgIGNvbG9yOiAgICAgIHdo aXRlOwogICAgICB9CgogICAgICB0ZXh0YXJlYS5maXhlZCB7CiAgICAgICAgICBtYXJnaW4tYm90 dG9tOiAtNHB4OwogICAgICB9CgogICAgICBiciwgLmNsZWFyIHsKICAgICAgICAgIGNsZWFyOiBi b3RoOwogICAgICB9CgogIDwvc3R5bGU+CgogIDxzY3JpcHQ+CiAgICAgIGZ1bmN0aW9uIGZpeCgp IHsKICAgICAgICAgIHdpbmRvdy50LmNsYXNzTmFtZSA9ICJmaXhlZCIKICAgICAgfQogIDwvc2Ny aXB0PgoKPC9oZWFkPgoKPGJvZHk+Cgo8ZGl2PgogICAgPHRleHRhcmVhIGlkPSJ0Ij50ZXh0YXJl YTwvdGV4dGFyZWE+CjwvZGl2PgoKPGRpdj4KICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiB2YWx1ZT0i aW5wdXQiPgo8L2Rpdj4KCjxkaXYgY2xhc3M9ImNsZWFyIj4KICAgIDxpbnB1dCB0eXBlPSJ0ZXh0 IiB2YWx1ZT0iaW5wdXQiPgo8L2Rpdj4KCjxicj4KCjxidXR0b24gY2xhc3M9ImNsZWFyIiBvbmNs aWNrPSJmaXgoKSI+LTRweCBtYXJnaW48L2J1dHRvbj4KCgo8L2JvZHk+CjwvaHRtbD4K