The cursor overflows when scrolling to iphone - safari

Question

I have research and many attempts to solve this problem, but I could not get a solution.

I have textarea like this

CSS

.textarea{ background-color: #ffffff; border: 1px solid #bbd7eb; color: #5e7891; font-family: "Roboto",Arial,"Nimbus Sans L","Helvetica CY",sans-serif; font-size: 14px; font-weight: normal; max-width: 560px; min-height: 100px; padding: 5px; resize: none; width: 100%; -webkit-overflow-scrolling: touch; } 

HTML

 <textarea class="textarea" name="" title=""></textarea> 

On iphone, when I enter a long paragraph and scroll the text box, the cursor goes out of the textarea frame.

Can someone help me solve this problem?

Answer 1

what would you like to achieve?

I played for you to describe with the details?

https://fiddle.jshell.net/mkdizajn/7m54bk5v/show/light/

Where is this property: -webkit-overflow-scrolling ? what aint right ..

I added overflow: hidden; what is it?

Answer 2

I tried your case on my iPhone 5 (both in Safari and Chrome).

In safari

All I can find out is when you scroll to touch a space in the text area, it’s not scrolling the content, but scrolling the entire page.

But when I tried to scroll by touching the contents , it worked smoothly.

Note. It worked fine on Chrome

Answer 3

I found a solution and tested ok on iOS 8.1 on

cursor gets out of control in textarea on iOS8 safari

The selection cursor is reset and moved to the end of the input.