[iOS] [Webview] Caret goes offscreen while typing #1321

ItsNoHax · 2018-10-23T11:35:11Z

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

11.1.1, any of the presets.

📋 Steps to reproduce

So we offer email functionalities within our React-Native app and while this works perfectly on Android, we are having issues with automatic scrolling on iOS when typing. (Note that a enter linebreak does work properly but continous typing goes off screen.)
I realise this might not be directly a bug of CKEditor, but I am desperate to figure out a solution as there are currently no proper rich text editors for react-native.

📃 Other details that might be useful

React-Native implementation details to reproduce.

RN version: 0.56

Render method:
(Note this is not RN's Webview due to us needing WKWebview and React-native only supporting it since RN 0.57. https://github.com/CRAlpha/react-native-wkwebview)

render() {
    return (
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior="padding"
        keyboardVerticalOffset={65}
      >
        <WKWebView
          ref={(ref) => { this.webView = ref; }}
          style={{ flex: 1 }}
          hideKeyboardAccessoryView
          keyboardDismissMode="on-drag"
          allowsBackForwardNavigationGestures={false}
          source={webapp}
          onMessage={this.onMessage}
        />
      </KeyboardAvoidingView>
    );
  }

The actual html we load:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>CKEditor 5 – Classic editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/decoupled-document/ckeditor.js"></script>
    <script>
      function postData() {
        window.postMessage(window.editor.getData())
      }
    </script>
</head>
<body>
    <!-- The toolbar will be rendered in this container. -->
    <div id="toolbar-container"></div>

    <!-- This container will become the editable. -->
    <div id="editor">
        <p>This is the initial editor content.</p>
    </div>
    <script>
        DecoupledEditor
            .create( document.querySelector( '#editor' ) )
            .then( editor => {
              var toolbarContainer = document.querySelector( '#toolbar-container' );

              toolbarContainer.appendChild( editor.ui.view.toolbar.element );

              window.editor = editor;
              editor.model.document.on( 'change:data', () => {
                postData();
              });
		    } )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

The text was updated successfully, but these errors were encountered:

Reinmar · 2018-10-24T14:15:43Z

I think this was a native issue of this platform. Didn't we have it reported already, @Mgsy?

Mgsy · 2018-10-25T07:24:06Z

I think this was a native issue of this platform. Didn't we have it reported already, @Mgsy?

I believe we didn't report it, but this one looks like the iOS issue. It could be reproduced in our editor, i.e. on ckeditor5.github.io or in a simple textarea - https://jsfiddle.net/9yub58ft/.

Works fine on Android.

Reinmar · 2018-10-29T15:19:19Z

OK, so this is an upstream issue. I just tried this in native contentEditable too and it was completely broken. I tested a couple other editors and it wasn't working too.

It's strange, though. I don't think this bug existed. It may be new. We should report it to Apple.

@Mgsy could you create samples with bare textarea and bare contentEditable element and record screencasts of what's happening?

ItsNoHax · 2018-10-31T08:38:40Z

@Reinmar @Mgsy Let me know if there is anything I can do to help. This is a real show stopper for me.

And I don't believe this is new, we had the same issue with CKEditor 4.

oleq · 2018-10-31T10:49:22Z

This could be because our view.scrollToTheSelection() method executed upon enter, backspace or paste. As long as the user is typing, the native positioning works but when they hit enter/backspace, our method kicks in and moves the viewport. This works properly on desktop but since the mechanics of the iOS viewport when the software keyboard is visible is weird it could be that scrollToTheSelection does more harm than good.

Mgsy · 2018-10-31T15:09:51Z

@Mgsy could you create samples with bare textarea and bare contentEditable element and record screencasts of what's happening?

I've prepared a sample with those elements. And here is a screencast, so you can check the behaviour in textarea and contenteditable elements.

Recorded on iPad@iOS 12.0.

ItsNoHax · 2018-11-01T15:08:12Z

@Mgsy @oleq @Reinmar

Is there any sort of temporary workaround that I could use for now? I believe the Medium iOS mobile app does some sort of workaround in their editor. If you create a post and type past the end you can see it triggers some sort of scroll event manually.

Reinmar · 2018-11-02T10:07:00Z

On the desktop, this would help:

editor.editing.view.on( 'render', () => {
	editor.editing.view.scrollToTheSelection();
}, { priority: 'low' } );

I'm testing it in Chrome with a code like this and every time "foo" is inserted into the editor, the viewport is properly scrolled to show the caret:

setInterval( () => {
	editor.model.change( writer => {
		editor.model.insertContent( writer.createText( 'foo' ) );
	} );
}, 2000 );

(DEMO: https://jsfiddle.net/tsf7mxd4/1/)

It has to be tested with an action which would not natively scroll the content, so not with the native typing because on all browsers (except Safari@iOS) typing does scroll the viewport.

So, the above demo works fine in Chrome and Safari@macOS and Chrome@Android.

But on iOS it does not work. Why? Because the viewport mechanics is broken there when the software keyboard is visible. That's an old issue (ckeditor/ckeditor5-design#149) that we tried to interest people about, but with no luck so far. However, just recently I talked with @whsieh on W3C TPAC that perhaps this could be fixed. I'm actually working on filing bug reports for that right now.

Anyway, to sum up, right now we can see that there are two issues:

Viewport mechanics when the software keyboard is visible. This one is old. Reported in: https://bugs.webkit.org/show_bug.cgi?id=191204
No scrolling on typing. This one seems to be a recent regression in Safari. Reported in: https://bugs.webkit.org/show_bug.cgi?id=191185

ItsNoHax · 2018-11-05T08:49:15Z

@Reinmar Thanks for the detailed reply. I'm a bit hesitant it will be fixed in the short term since the first time this bug was reported was in 2016 according to the openradar link

Reinmar · 2018-11-05T09:01:29Z

Apple rarely shares their plans regarding such issues. The best solution, IMO, for now, would be to get as many developers as possible leaving feedback under https://bugs.webkit.org/show_bug.cgi?id=191185 regarding the severity of this issue. Since it's considered a regression, I think there's not much doubt that it's doesn't work as intended now, so the only problem should be properly prioritising it.

CKEditorBot · 2023-10-04T05:18:31Z

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

CKEditorBot · 2023-11-07T05:13:58Z

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).

Reinmar added the type:bug This issue reports a buggy (incorrect) behavior. label Nov 5, 2018

Mgsy added the browser:ios label Feb 14, 2019

Mgsy added the status:confirmed label Mar 5, 2019

Reinmar added this to the unknown milestone Apr 16, 2019

Mgsy mentioned this issue May 13, 2019

In Safari on iOS 12.2 iPhone, content does not scroll and becomes obscured at the bottom. #1756

Closed

mlewand removed the status:confirmed label Mar 18, 2020

pomek removed this from the unknown milestone Feb 21, 2022

CKEditorBot added the status:stale label Oct 4, 2023

CKEditorBot added the resolution:expired This issue was closed due to lack of feedback. label Nov 7, 2023

CKEditorBot closed this as not planned Won't fix, can't repro, duplicate, stale Nov 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[iOS] [Webview] Caret goes offscreen while typing #1321

[iOS] [Webview] Caret goes offscreen while typing #1321

ItsNoHax commented Oct 23, 2018 •

edited

Loading

Reinmar commented Oct 24, 2018

Mgsy commented Oct 25, 2018

Reinmar commented Oct 29, 2018

ItsNoHax commented Oct 31, 2018 •

edited

Loading

oleq commented Oct 31, 2018 •

edited

Loading

Mgsy commented Oct 31, 2018 •

edited

Loading

ItsNoHax commented Nov 1, 2018

Reinmar commented Nov 2, 2018 •

edited

Loading

ItsNoHax commented Nov 5, 2018

Reinmar commented Nov 5, 2018

CKEditorBot commented Oct 4, 2023

CKEditorBot commented Nov 7, 2023

[iOS] [Webview] Caret goes offscreen while typing #1321

[iOS] [Webview] Caret goes offscreen while typing #1321

Comments

ItsNoHax commented Oct 23, 2018 • edited Loading

Is this a bug report or feature request? (choose one)

💻 Version of CKEditor

📋 Steps to reproduce

📃 Other details that might be useful

Reinmar commented Oct 24, 2018

Mgsy commented Oct 25, 2018

Reinmar commented Oct 29, 2018

ItsNoHax commented Oct 31, 2018 • edited Loading

oleq commented Oct 31, 2018 • edited Loading

Mgsy commented Oct 31, 2018 • edited Loading

ItsNoHax commented Nov 1, 2018

Reinmar commented Nov 2, 2018 • edited Loading

ItsNoHax commented Nov 5, 2018

Reinmar commented Nov 5, 2018

CKEditorBot commented Oct 4, 2023

CKEditorBot commented Nov 7, 2023

ItsNoHax commented Oct 23, 2018 •

edited

Loading

ItsNoHax commented Oct 31, 2018 •

edited

Loading

oleq commented Oct 31, 2018 •

edited

Loading

Mgsy commented Oct 31, 2018 •

edited

Loading

Reinmar commented Nov 2, 2018 •

edited

Loading