NEW184178
Iframe contenteditable scrolls on ios 
https://bugs.webkit.org/show_bug.cgi?id=184178
Summary Iframe contenteditable scrolls on ios
k.litwinowicz
Reported 2018-03-30 07:02:21 PDT
Created attachment 336852 [details] 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=" &lt;body contenteditable=&quot;true&quot; spellcheck=&quot;false&quot;&gt; &lt;p&gt;Paragraph 01&lt;/p&gt; &lt;p&gt;Paragraph 02&lt;/p&gt; &lt;p&gt;Paragraph 03&lt;/p&gt; &lt;p&gt;Paragraph 04&lt;/p&gt; &lt;p&gt;Paragraph 05&lt;/p&gt; &lt;p&gt;Paragraph 06&lt;/p&gt; &lt;p&gt;Paragraph 07&lt;/p&gt; &lt;p&gt;Paragraph 08&lt;/p&gt; &lt;p&gt;Paragraph 09&lt;/p&gt; &lt;p&gt;Paragraph 10&lt;/p&gt; &lt;p&gt;Paragraph 11&lt;/p&gt; &lt;p&gt;Paragraph 12&lt;/p&gt; &lt;p&gt;Paragraph 13&lt;/p&gt; &lt;p&gt;Paragraph 14&lt;/p&gt; &lt;p&gt;Paragraph 15&lt;/p&gt; &lt;/body&gt;"></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>
Attachments
Video showing this bug (19.33 MB, video/quicktime)
2018-03-30 07:02 PDT, k.litwinowicz 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2018-04-01 23:09:43 PDT
<rdar://problem/39096792>
Chris Gilbert
Comment 2 2018-07-25 05:08:06 PDT
This bug is affecting my application as well.
Lucas Forschler
Comment 3 2019-02-06 09:18:45 PST
Mass move bugs into the DOM component.
Note You need to log in before you can comment on or make changes to this bug.