autocomplete: options pop-up in floating-label mode detaches from input on backdrop swipe up/down on iOS

[Splaktar]

Bug

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

https://codepen.io/pen/?editors=1010#0

Detailed Reproduction Steps:

1. Type a in the autocomplete's input
2. Swipe up or down on the page not covered by the options pop-up

What is the expected behavior?

The options may bounce a little as per iOS behavior, but the options pop-up panel should not move in relation to the autocomplete's input.

What is the current behavior?

The options pop-up panel breaks free and the page is allowed to be scrolled with the panel detached from the autocomplete's input.

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

It should work like non-floating-label mode and not allow background page to be scrolled.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7.8
• AngularJS Material: 1.1.20
• OS: iOS 12
• Browsers: Safari

Is there anything else we should know? Stack Traces, Screenshots, etc.

Discovered while testing https://github.com/angular/material/issues/11778#issuecomment-524573747.

This is a regression introduced in 1.1.20 by PR https://github.com/angular/material/pull/11743.

May be related to https://github.com/angular/material/issues/11478.