Bug 191185 - Viewport is not scrolled to the selection on typing in contentEditable or textarea
Summary: Viewport is not scrolled to the selection on typing in contentEditable or tex...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: HTML Editing (show other bugs)
Version: Safari 12
Hardware: iPhone / iPad iOS 12
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-11-02 03:22 PDT by Piotrek Koszuliński (Reinmar)
Modified: 2018-11-05 01:47 PST (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Piotrek Koszuliński (Reinmar) 2018-11-02 03:22:07 PDT
I think this is a recent regression because this started to be reported to us very recently (e.g. in https://github.com/ckeditor/ckeditor5/issues/1321). 

To reproduce (on iOS):

1. Open https://jsfiddle.net/hzkfdrgw/
2. Place the selection in the textarea. Press the enter a couple of times.
3. Scroll the viewport so the caret goes off screen.
4. Type something.

Expected behaviour: the viewport is scrolled to show the selection.

Actual behaviour: the viewport is not scrolled.

Screencast: http://sendvid.com/qzpnxe3h

Severity: This is a quite serious issue due the fact that is super hard to create a workaround for it that would work in mobile Safari due to Safari's broken viewport when the software keyboard is visible. My tests (https://github.com/ckeditor/ckeditor5/issues/1321#issuecomment-435330662) show that on all other browsers we can reliably show the selection by playing with `window.scrollTop`. But that algorithm doesn't work in mobile Safari. I'll be filling a separate bug report about the viewport.
Comment 1 Wenson Hsieh 2018-11-02 08:24:07 PDT
<rdar://problem/28300343>
Comment 2 Wenson Hsieh 2018-11-02 08:25:29 PDT
(In reply to Piotrek Koszuliński (Reinmar) from comment #0)
> I think this is a recent regression because this started to be reported to
> us very recently (e.g. in
> https://github.com/ckeditor/ckeditor5/issues/1321). 
> 
> To reproduce (on iOS):
> 
> 1. Open https://jsfiddle.net/hzkfdrgw/
> 2. Place the selection in the textarea. Press the enter a couple of times.
> 3. Scroll the viewport so the caret goes off screen.
> 4. Type something.
> 
> Expected behaviour: the viewport is scrolled to show the selection.
> 
> Actual behaviour: the viewport is not scrolled.
> 
> Screencast: http://sendvid.com/qzpnxe3h
> 
> Severity: This is a quite serious issue due the fact that is super hard to
> create a workaround for it that would work in mobile Safari due to Safari's
> broken viewport when the software keyboard is visible. My tests
> (https://github.com/ckeditor/ckeditor5/issues/1321#issuecomment-435330662)
> show that on all other browsers we can reliably show the selection by
> playing with `window.scrollTop`. But that algorithm doesn't work in mobile
> Safari. I'll be filling a separate bug report about the viewport.

Thanks for the report, Piotrek! We're tracking this internally in <rdar://problem/28300343>. It looks like this is a regression that first appeared in iOS 10.
Comment 3 Piotrek Koszuliński (Reinmar) 2018-11-02 12:58:43 PDT
Thank you Wenson for the good news! :)

BTW, I reported the other issue about the mobile Safari's weird viewport in https://bugs.webkit.org/show_bug.cgi?id=191204
Comment 4 Alberto Blanco 2018-11-05 01:47:49 PST
Hope this issue can be picked up as soon as possible. In our user case it is really the missing component for a proper UX experience when writing an email. Not scrolling as you type is a very frustrating experience.