autocomplete: position not calculated correctly with body {height: auto;} style

[donmccurdy]

Actual Behavior:

• What is the issue? * When the <body/> tag has height: auto set in CSS, dropdown position is always below the input, regardless of available space.
• What is the expected behavior? Dropdown position should be above or below depending on absolute position of the input relative to the viewport, without breaking when ngMaterial's default height:100%; is overridden.

CodePen (or steps to reproduce the issue): *

• Gist: https://gist.github.com/donmccurdy/ff3e75232a02c9457fd2842410263840
• Demo: http://bl.ocks.org/donmccurdy/raw/ff3e75232a02c9457fd2842410263840/

Screenshots, from Chrome's iPhone 6 emulator:

body{height:100%;}	body{height:auto;}

AngularJS Versions: *

• AngularJS Version: 1.5.8
• AngularJS Material Version: 1.1.0

Additional Information:

• Browser Type: * Mobile
• Browser Version: * All

---

Note: The reason I'm trying to set height:auto is because it fixes another bug related to ngAutocomplete in our app. To reproduce that original bug, visit https://www.google.com/get/sunroof/process/ on iPhone, scroll down to the orange Switch on and start saving! section, and type "25" in the input. When autocomplete appears, the entire input scrolls out of place. Setting height:auto on the body fixes that issue, but with the side effects described above. EDIT: We have since deployed height:auto and fixed that original bug, as the bug described by this issue is less severe.

Perhaps there's something else going on with our page structure that ngAutocomplete doesn't like? Our content is not absolutely positioned or anything like that...