[Webkit-unassigned] [Bug 187539] New: [iOS] Textareas within iframes scroll off the screen when using hardware arrow keys to move the cursor down

Tue Jul 10 16:20:26 PDT 2018

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

            Bug ID: 187539
           Summary: [iOS] Textareas within iframes scroll off the screen
                    when using hardware arrow keys to move the cursor down
           Product: WebKit
           Version: Safari 11
          Hardware: iPhone / iPad
                OS: iOS 11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Frames
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: jstanden+webkit at gmail.com

Created attachment 344732

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

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).

-- 
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/20180710/2525a21f/attachment-0001.html>