DFW Auto textarea lengthening is twitchy

[markjaquith]

The auto textarea lengthening is twitchy. It shoves the content up a line, then pulls it back down.

Best seen in a screencast: ​http://screencast.com/t/e5zIpkk9nY

Seems browser specific: doesn't happen in FF, sometimes in Chrome (win) and IE.

This happens all the time for me in Chrome Mac.

The reason why it's that way is because the textarea new size does not provide enough space for the new line. Line-height of the text area is 19px (1.625em). Adding 19px to the resized height eliminate this issue for me.

Attached is a patch. Please test.

Ignore the naive patches. They don't work.

Basically what's going on in m browser is:

• When \n is inserted, the textarea automatically scroll, so the first line became out of view.
• After that, the auto-resize mechanism kicks in, and resizes the textarea properly, which then restores the first line and makes the text area jump a bit.

Just wanna confirm that this is not happening in Gecko, just Webkit.

Somehow in Webkit, the scrolling happens before "keyup" event is fired.

There's just no clever work-around for this as far as I know. Of course we could use a contentEditable body inside an iframe (just like the visual edit box) instead of a textarea, but that would be an overkill.

OK, this CSS trick fixes it. Add 19px to the bottom padding of the text area (and subsequently subtract 19px from the container's padding).

Attached patch

I would really like to fix this. It is incredibly distracting when using DFW.

Replying to garyc40:

OK, this CSS trick fixes it.

Unfortunately it also hides the last line when the text is longer than the initial height of the textarea.