iOS selectable text and highlight issue

There seems to be an issue when you highlight text in iOS and you scroll in the contenteditable element. As you scroll the highlight indicator/selector doesn’t follow the highlighted text and remains in the same place, until you let go and then it will show.

Highlight text before scrolling:
IMG_5715

While scrolling:
IMG_5716

However, if you highlight a few words, then it does follow but is very jerky as you scroll. When you then go back to highlighting a word then it’s jerky instead of delayed like I explained above.

Is there something I need to enable to be able to handle scrolling and highlighting text at the same time?

I hope the above make sense.

fist bumping this post up

See:

thanks for your response.

I previously came across Quill but had no luck with it, but now managed to get it working. However it still has that highlight/scroll issue.

I tried Prosemirror which looks promising and found this https://github.com/urshofer/ng2-prosemirror

But didn’t get far. It seems you have to install different modules separately and the readme isn’t great.

I might give it another go.

I also tried this: https://github.com/codiak/angular2-medium-editor but still has the issue.

I even tried https://github.com/chymz/ng2-codemirror but still has that issue.

I wonder if it’s something in Ionic when you scroll in iOS :thinking: because I’ve tested contenteditable + normal textarea and both behave the same when you highlight text, scroll and only when you let go, does the highlight indicator catch up with the text.

See: https://open.nytimes.com/building-a-text-editor-for-a-digital-first-newsroom-f1cb8367fc21