search

ionic-team / ionic-v1

The repo for Ionic 1.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
193 stars 187 forks source link

bug: Weird scrolling when focusing huge textarea #19

Open jgw96 opened 7 years ago

jgw96 commented 7 years ago

From @OrangeClyde on October 5, 2015 15:29

Type: bug

Platform: mobile webview

When focusing a textarea exceeding the screen, the textarea is scrolled to its end. This even happens when the textarea is focused already and you try to set the caret to another position. Check the following Codepen and make sure to enable touch emulation in the developer tools - interestingly this seems to be working as long as click events are being triggered. After enabling touch emulation make sure to lose the focus by clicking the header once. Afterwards try to focus.

http://codepen.io/anon/pen/PPmwRa

I'd be grateful for any help on this - have tried a lot of stuff (set the textarea's height to the screen's height and use scrolling inside the textarea - didn't work as expected; had a look at contenteditable - no success). Surely this is not a very common use case, but it might occur at least sometimes on mobile devices that you encounter written texts in a text area exceeding the screen's height.

Thanks in advance and best regards!

Copied from original issue: driftyco/ionic#4472

jgw96 commented 7 years ago

From @OrangeClyde on October 13, 2015 13:40

So.. would like to bump this, because I guess there might be other people running into similar problems.

What I discovered is that the scrollChildIntoView function is causing the main problem, as the textarea is such big that most parts of it are obviously hidden by the keyboard in the moment the focus starts. If an element is focused and would be partly hidden by the keyboard it's scrolled into view by scrollChildIntoView. Normally a good idea, but in this scenario not very helpful. ;)

So I made a little workaround for this. A little dirty, but scrolling stopped, what a relief!

But then I discovered something else: Focusing did not always set the caret to the correct position. In fact it was set back to the last position if the focus got lost, then the textarea got scrolled and focused again. My solution here was to switch back from native to JS scrolling again. Couldn't find another solution, not sure if this is simply a problem with large textareas and overflow-scrolling.

So far.. best regards.

jgw96 commented 7 years ago

From @KillerCodeMonkey on March 15, 2016 9:56

hey there. i mentioned the same. Scrolling with textareas works only with max 5 rows.

jgw96 commented 7 years ago

From @alaa-alshamy on August 16, 2016 8:16

same here , any updates ?