Incorrect mat-select drop-down positioning in iOS Safari with iframe present in form

[akardc]

Bug, feature request, or proposal:

In iOS Safari, when an iframe with an input is present within a form with mat-select inputs, after first focusing the iframe input field, when the select is clicked, the drop-down does not appear in the correct position and does not scroll correctly with the select field.

What is the expected behavior?

The drop-down will appear over the mat-select as it does when no iframe is present.

What is the current behavior?

The drop-down appears in the wrong position and does not scroll with the rest of the screen.

What are the steps to reproduce?

1. open http://plnkr.co/edit/PQDUDf?p=preview in iOS Safari
2. click the input in the iframe
3. click the mat-select
   The drop-down that appears should be in the wrong position. If you scroll the screen around, the drop down will not move correctly with the rest of the screen.

What is the use-case or motivation for changing an existing behavior?

Sometimes it is necessary to use an iframe within a form, and the form may need select inputs.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material: 2.0.0-beta.12
OS: iOS (confirmed on 10.2)
Browser: iOS Safari

[crisbeto]

Closing due to inactivity and because the repro no longer works.