[Webkit-unassigned] [Bug 204450] New: Text input cursor can not scroll to start when inside an iframe

Thu Nov 21 03:45:36 PST 2019

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

            Bug ID: 204450
           Summary: Text input cursor can not scroll to start when inside
                    an iframe
           Product: WebKit
           Version: Safari 13
          Hardware: iPhone / iPad
                OS: iOS 13
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Forms
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: matt at vlocity.com
                CC: cdumez at apple.com, wenson_hsieh at apple.com

Created attachment 384041

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

Zip of the two pages and 2 gif's showing it working outside an iframe and failing inside the iframe

We've found a bug with a simple <input type="text" /> is in a basic html page inside of iframe. When the user enters text that scrolls beyond the available width of the input, if the user then tries to move the cursor back to the start of the text it won't work. The only solution for them is to delete the text until they reach the point they want to edit. A quick way to see this is:

1. Go to https://jsbin.com/xeqokew/2/edit?output on any ios device.
2. type in text until it overflows the visible area of the text input
3. touch the input and try to move the cursor back to the beginning of the text.

I've also verified the bug exists with much simpler html. I created a page called "embed.html" with the following content:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Embed</title>
  </head>
  <body>
    <input type="text" />
  </body>
</html>

And a parent page called "index.html" with:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Parent</title>
  </head>
  <body>
    <iframe src="embed.html"
            style="border: 0; width: 100vw; height: 100vh"></iframe>
  </body>
</html>

Here's a video showing the correct behavior when opening the embed.html page directly: http://g.recordit.co/s59R7c7kMY.gif

And another video showing the incorrect behavior when opening the index.html: http://g.recordit.co/8AEm5TAn89.gif

I've attached a zip with the 2 html files and (the above 2 gif's in case they disappear from the internet). 

I've tested on Safari 12 (ios 12) and it also has the same issue.

There seem's to be a similar issue reported here https://bugs.webkit.org/show_bug.cgi?id=148061 but this seems to be fixed and doesn't need the additional iframe to reproduce.

-- 
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/20191121/3a2a931c/attachment.htm>