Bug 187539 - [iOS] Textareas within iframes scroll off the screen when using hardware arrow keys to move the cursor down
Summary: [iOS] Textareas within iframes scroll off the screen when using hardware arro...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Frames (show other bugs)
Version: Safari 11
Hardware: iPhone / iPad iOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2018-07-10 16:20 PDT by Jeff Standen
Modified: 2018-07-12 09:59 PDT (History)
4 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Jeff Standen 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).