How does fit-textarea compare with a naïve solution, and with autosize?

[leafac]

Hi @fregante,

First of all, I found fit-textarea via the excellent text-field-edit. So thank you very much for both of these projects—they’re great!

I’d like to understand better what fit-textarea is doing. As far as I know, there are three potential solutions to the issue that fit-textarea solves:

1. fit-textarea

2. Autosize

3. The naïve solution:

   textarea.style.height = "auto";
   textarea.style.height = textarea.scrollHeight + "px";

Can you help me understand the differences between them? What are the tradeoffs, advantages, and disadvantages?

Thank you very much!

[fregante]

autosize and fit-textarea@v2 both use the naive solution with some utility/management around it (e.g. to preserve scroll position)

The main drawback of this solution is that each keystroke will cause "layout thrashing" of the entire page even if it's not necessary. This performs particularly badly on Safari and/or on large pages.

The solution that v3 currently uses is via a mirrored element but while this works well on Safari, it performs poorly on Chrome (in my experience), so in the project I wrote this module for I actually reverted to v2 and disabled the feature in Safari.

I haven't had time to investigate either solution better. Maybe one day I'll try using the contain CSS property with v2’s solution.

The main difference between autosize and this project however is that autosize is older and supports IE (with all the code/hacks that follows that) while this one aims at supporting only modern browsers.

[leafac]

Thank you very much for the information. And so quick to answer, too 😁

It’s interesting to know that you’re using v2. I considered doing that, given that max-height is important for me.

Keep up the great work!