iOS Safari typing text scrolls the ckeditor

[razyon]

Type of report

Feature request

Provide description of the new feature

This issue occurs due to upstream Safari #184178 bug.

On the main page of ckeditor.com add a few lines to the end of the first ckEditor instantiated (Article Editor) then place your cursor to the top of the article and start typing.

The CKEditor will scroll down and you will not see what you are typing.

Known workarounds

This editor happens only with the classic editor, so using divarea plugin or an inline editor will mitigate the problem.

[msamsel]

iOS 10.3.2
iPhone SE
Safari

1. Open ckeditor.com, or sample (tested on 4.7.0)
2. Add text in editor, to have scrolled down text inside editor
3. Unselect editor
4. Scroll up text in editor to the beginning
5. Put caret in first line and start to write
6. Content will scroll down and caret will be above the editor

Picture how it looks, with visible caret.

[buguil]

Is there any update on this issue ?
Why assignment removed on july 5th ? Difficult to fix it ?

[benfarhner]

iPhone 7 Plus
iOS 10.3.3
Safari & Chrome

I'm able to reproduce this issue as well on my iPhone with the latest version of iOS (10.3.3) in both Safari and Chrome (both up to date as well). This is affecting a major customer of ours who uses iPads for entering and editing long notes with CKEditor. Are there any workarounds or solutions we can use in the meantime until this gets fixed in the main library?

[mlewand]

@benfarhner We don't have yet any verified workarounds. If you're willing to tinker a bit, you could check the #328 PR - it might help mitigate/resolve this issue.

[peopleplaces]

Update: PR #328 does not resolve the issue. Using iOS 9.3.5. Also confirmed issue still exists on iOS 10.3.3

[youchenlee]

This issue exists on my iPhone (on both Safari and Google Chrome) and my Android phone (with Google Chrome), other browsers not been tested yet.

I think this is not only an iOS/Safari issue.

[Mgsy]

I just want to make a small update about this issue. This bug still occurs in iOS (tested with iPad iOS 11.1.2) and CKEditor 4.8.0.

Update: PR #328 does not resolve the issue. Using iOS 9.3.5.

I can confirm that this PR doesn't fix problem with scrolling, but I'm not able to reproduce it in iPod iOS 9.3.5 Safari.

This issue exists on my iPhone (on both Safari and Google Chrome) and my Android phone (with Google Chrome), other browsers not been tested yet.

I've checked it in Google Chrome Android 7.0 and I'm not able to reproduce this issue.

It looks like this one occurs in iOS 10+ only.

[youchenlee]

@Mgsy thank you for the update.
I will try on my Google Chrome on Android again and update the result here.

[evgeny-belyaev]

I found workaround for this issue: with autogrow plugin enabled it works just fine for me (iPhone iOS 11.1.1 safari and chrome).

[KupnoH]

Hi everyone!
I'm also experiencing the problem with editor on iphone and ipad. I'm using drupal and by suggestion of evgeny-belyaev on the comment above installed plugin autogrow, but, unfortunately, nothing happens. It still have problems.

[heyflo]

Tested on iOS 10+ and I'm reproducing this error with CK Editor module on Drupal 7.
Also tested it on Chrome Android (last version), it is working properly.

I don't know if I should try the autogrow plugin but if we do, I'll keep you updated weither it's working or not.

[engineering-this]

Hi there.

This issue is upstream as I could reproduce it without CKEditor.

Webkit issue

I understand that it makes our editor very hard to use on iOS we will try to implement some workaround.

Note: This bug is not occuring when using the divarea plugin.

Edit: PR with proposed workaround: #1861

[mlewand]

Just to provide an update on this issue: we were trying to tackle this issue, however there is no easy way for us to solve this issue. Just see pull request #1861.

This is an upstream issue so the best would be to fix the issue in Safari itself, so it's a good idea to show your need for that by ccing/commenting https://bugs.webkit.org/show_bug.cgi?id=184178

[benfarhner]

Does this issue exist in CKEditor 5 since it's not using contentEditable?

[engineering-this]

Does this issue exist in CKEditor 5 since it's not using contentEditable?

This issue shouldn't be reproducible in CKEditor 5 because it doesn't use iframe. CKEditor 4 with divarea works good on iPad too.

[jonasva]

CKEditor 4.7 + divarea plugin solved the issue for me (tested on iPhone SE iOS 11.3)

[mlewand]

Since this is an upstream bug, this issue is now tracked as a feature request to get around a Safari bug.

[Mgsy]

There is another scenario with a similar effect.

Steps to reproduce

1. Open a sample with scrollable content.
2. Focus the editor.
3. Scroll to the bottom of the editor.
4. Put the selection in some text.
5. Scroll up a little.
6. Put the caret in some text.
7. Scroll slowly to the top of the editor.
8. Type something.

Current result

• After step 7, the caret moves down out of the editor.
• The editor has been scrolled to the bottom and there is a visible caret over a toolbar (even while typing).

[shram2k]

CKEditor 4.7 + divarea resolved this issue on ipad portrait mode but issue still exists in landscape mode. Any workaround?
https://stackoverflow.com/questions/51473653/ckeditor-4-5-11-cursor-moves-to-top-on-typing-in-ipad-v-11-3-1

[mlewand]

@shram2k none that we're aware of. We'd really appreciate bumping Safari upstream bug, the best solution here is to get upstream fix in Safari.