search

bgrins / ExpandingTextareas

jQuery plugin for elegant expanding textareas
http://bgrins.github.com/ExpandingTextareas/
MIT License
261 stars 73 forks source link

Text jitter in IE11 #56

Open MadOPcode opened 9 years ago

MadOPcode commented 9 years ago

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

domchristie commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 https://github.com/bgrins/ExpandingTextareas/blob/ec35959994d85c8ac59ffb034aa768a9880ecbdd/expanding.js#L166 )

On 17 December 2014 at 13:00, MadOPcode notifications@github.com 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 https://github.com/bgrins/ExpandingTextareas/issues/56#issuecomment-67318616 .

Dom Christie t: 07709143652 e: christiedom@gmail.com

domchristie commented 9 years ago

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 https://github.com/bgrins/ExpandingTextareas/blob/ec35959994d85c8ac59ffb034aa768a9880ecbdd/expanding.js#L166 )

MadOPcode commented 9 years ago

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 commented 9 years ago

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

MadOPcode commented 9 years ago

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

Yes.