contenteditable elements are not properly scrolled into the visible viewport focused and virtual keyboard opens on iOS

[belDom]

Actual Behavior:

• What is the issue? * When clicking on a contenteditable, the page jumps down.
• What is the expected behavior? It should behave just as input fields, where the page scrolls to that element.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/pennybirman/pen/KaErKb
• Details: Has to be tested in a iOS mobile device. (Verified it in browserStack, and xCode with ios10).

Angular Versions: *

• Angular Version: 1.5.7
• Angular Material Version:1.1.0

Additional Information:

• Browser Type: * Safari mobile.
• Browser Version: *10.0
• OS: *iOS 10.
• Stack Traces: No errors, just UI behaviour.
• Video:: https://youtu.be/6U6BtxQggJ8

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[Splaktar]

I updated the CodePen to 1.1.10 and I did notice that Safari didn't scroll the selected contenteditable into the visible viewport when the virtual keyboard opens. I also noticed times when it was hard to scroll to the last contenteditable with the virtual keyboard open.

I tried without md-content to see if that was the issue, but it had the same behavior.

Then I tried without AngularJS Material and while the behavior wasn't as nice as with input elements, Safari did always scroll the contenteditable into the visible viewport on focus.

I also tested without material.css to see if it was the CSS causing this issue, but the problem remained.

I don't really have any ideas or leads for tracking this down atm. If anyone has any suggestions or can debug this further, it would be appreciated.