Bug 187539

Summary:

[iOS] Textareas within iframes scroll off the screen when using hardware arrow keys to move the cursor down

Product:

WebKit

Reporter:

Jeff Standen <jstanden+webkit>

Component:

Frames

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

jstanden+webkit, megan_gardner, simon.fraser, wenson_hsieh

Priority:

Version:

Safari 11

Hardware:

iPhone / iPad

OS:

iOS 11

Attachments:

Description	Flags
Demonstration of hardware arrow keys scrolling bug in textarea within an iframe	none

Jeff Standen

Reported 2018-07-10 16:20:26 PDT

Created attachment 344732 [details] Demonstration of hardware arrow keys scrolling bug in textarea within an iframe Overview: In specific conditions, focusing the cursor into a textarea within an iframe causes arrow key navigation to scroll the entire page outside the bounds of the form element. I tested this on Safari in iOS 11.4 with iPads and iPhones. With this example, it's easiest to reproduce the issue with the iPhone 8 simulator. Steps to reproduce: 1. Enable hardware keyboard on iOS (my client used a Bluetooth keyboard with an iPad Air 2, I used the iPhone Simulator). 2. Open the included index.html and iframe.html example in Safari using iOS 11 on an iPhone 8 (hardware or simulator). 3. Tap on line 4 of the textarea. Safari will scroll the viewport (with or without the software keyboard). 4. Use only the down arrow to move the cursor to line 10 within the textarea. Actual result: The textarea scrolls entirely out of the viewport. This does not occur when viewing iframe.html directly. It only occurs when using index.html that displays iframe.html in an iframe. Expected result: The cursor should move down to the last line of the textrea and then stop. The scroll of the viewport should either not be affected, or the bottom of the textarea should not leave the viewport. Included is a minimal example in pure HTML that reproduces the issue. index.html: ~~~ <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> </head> <body style="padding:0;margin:0;"> <iframe src="iframe.html" scrolling="yes" border="0" style="width:100%;"> </body> </html> ~~~ iframe.html: ~~~ <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> </head> <body> <div style="height:400px;background-color:red;"></div> <div> <input type="text"> </div> <textarea rows="20" cols="20" style="width:100%;">1 2 3 4 5 6 7 8 9 10 </textarea> <div style="height:1000px;background-color:blue;"></div> </body> </html> ~~~ The misbehavior can be seen in the attached video (GIF).

Attachments
Demonstration of hardware arrow keys scrolling bug in textarea within an iframe (207.43 KB, image/gif) 2018-07-10 16:20 PDT, Jeff Standen	no flags	Details
View All Add attachment proposed patch, testcase, etc.

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