Bug 204450

Summary:

Text input cursor can not scroll to start when inside an iframe

Product:

WebKit

Reporter:

Matt Goldspink <matt>

Component:

Forms

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Major

CC:

cdumez, matt, megan_gardner, webkit-bug-importer, wenson_hsieh

Priority:

Keywords:

InRadar

Version:

Safari 13

Hardware:

iPhone / iPad

OS:

iOS 13

Attachments:

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

Matt Goldspink

Reported 2019-11-21 03:45:36 PST

Created attachment 384041 [details] 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.

Attachments
Zip of the two pages and 2 gif's showing it working outside an iframe and failing inside the iframe (369.37 KB, application/zip) 2019-11-21 03:45 PST, Matt Goldspink	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2019-11-22 15:49:19 PST

<rdar://problem/57443898>

Note You need to log in before you can comment on or make changes to this bug.