[Webkit-unassigned] [Bug 184178] New: Iframe contenteditable scrolls on ios

Fri Mar 30 07:02:21 PDT 2018

https://bugs.webkit.org/show_bug.cgi?id=184178

            Bug ID: 184178
           Summary: Iframe contenteditable scrolls on ios
           Product: WebKit
           Version: Safari 11
          Hardware: iPhone / iPad
                OS: iOS 11
            Status: NEW
          Severity: Major
          Priority: P2
         Component: HTML Events
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: k.litwinowicz at cksource.com

Created attachment 336852

  --> https://bugs.webkit.org/attachment.cgi?id=336852&action=review

Video showing this bug

Hello.

I'm reporting bug, that makes some webpages hard to use on iOS Safari.

Attached video of this issue.

Steps to reproduce:

1. Use below code as HTML on mobile safari browser. I used iPad.
2. Focus beginning of editable.
3. Scroll down whole page so editable element is close to top of view.
4. Type something with display keyboard.

Unexpected:

Iframe is scrolled down and caret is not visible. User don't see what he is typing.

After some research, `preventDefault` on `keydown` prevents this strange scroll, but `beforeinput` and `input` doesn't. Although `preventDefault` also stops input, so you can't type in editable.

-- HTML CODE --

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
                .wrapper {
                        width: 150px;
                        height: 150px;
                        overflow-y: auto;
                        -webkit-overflow-scrolling: touch;
                        border: solid 1px black;
                }
        </style>

</head>
<body>
<p>Paragraph above</p>
<p>Paragraph above</p>
<p>Paragraph above</p>
<p>Paragraph above</p>
<p>Paragraph above</p>
<p>Paragraph above</p>
<p>Paragraph above</p>
<p>Paragraph above</p>
<p>Paragraph above</p>
<p>Paragraph above</p>
<div class="wrapper">

                <iframe srcdoc="
<body contenteditable="true" spellcheck="false">
<p>Paragraph 01</p>
<p>Paragraph 02</p>
<p>Paragraph 03</p>
<p>Paragraph 04</p>
<p>Paragraph 05</p>
<p>Paragraph 06</p>
<p>Paragraph 07</p>
<p>Paragraph 08</p>
<p>Paragraph 09</p>
<p>Paragraph 10</p>
<p>Paragraph 11</p>
<p>Paragraph 12</p>
<p>Paragraph 13</p>
<p>Paragraph 14</p>
<p>Paragraph 15</p>
</body>"></iframe>

</div>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
<p>Paragraph below</p>
</body>
</html>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20180330/550d8983/attachment.html>