Text jitter in IE11

[MadOPcode]

If you look at your demo in IE11 you can clearly see text jitter on pressing enter.

[domchristie]

After some testing, I think this could be a result of applying overflow: auto to the textarea, causing scrollbars to appear momentarily.

The original article recommends using overflow: hidden to avoid scrollbars from appearing. However, if I remember correctly, this plugin uses overflow: auto to account for cases where max-height is present.

Perhaps we should revert to overflow: hidden and only apply overflow: auto once the max-height is reached?

[MadOPcode]

I think this is what happens:

1. The content is added to textarea causing the "scrollHeight" of textarea to increase.
2. Because this is a textarea the browser (IE) scrolls the content up for the caret to remain visible at the bottom of textarea.
3. The input/keyup event fires and the mirrored element content is being updated in the end causing the textarea to stretch thus moving the textarea's bottom and its content down.
   So I suppose that regardless of the value of overflow property this jitter will be observed.

[domchristie]

Interesting.

On browserstack I can reproduce this. It appears to be noticeable only when
pressing "return"

Are you able to test it using overflow: hidden? (see

ExpandingTextareas/expanding.js

Line 166 in ec35959

overflow: 'auto'

)

On 17 December 2014 at 13:00, MadOPcode [email protected] wrote:

I think this is what happens:

1. The content is added to textarea causing the "scrollHeight" of textarea
   to increase.
2. Because this is a textarea the browser (IE) scrolls the content up for
   the caret to remain visible at the bottom of textarea.
3. The input/keyup event fires and the mirrored element content is being
   updated in the end causing the textarea to stretch thus moving the
   textarea's bottom and its content down.
   So I suppose that regardless of the value of overflow property this jitter
   will be observed.

—
Reply to this email directly or view it on GitHub
#56 (comment)
.

Dom Christie
t: 07709143652
e: [email protected]

[domchristie]

Ah, part of my reply was cut off. The rest:

On browserstack I can reproduce this. It appears to be noticeable only when pressing "return" Are you able to test it using overflow: hidden? (see

ExpandingTextareas/expanding.js

Line 166 in ec35959

overflow: 'auto'

)

[MadOPcode]

Are you able to test it using overflow: hidden?

Yes. This jitter is also observed with overflow: hidden. And it occurs also when typing some text (not only when pressing enter), although very rarely.

[domchristie]

Do you experience the same behaviour on http://alistapart.com/article/expanding-text-areas-made-elegant#figure1 ?

[MadOPcode]

Do you experience the same behaviour on http://alistapart.com/article/expanding-text-areas-made-elegant#figure1 ?

Yes.