select: default scroll position incorrect when using md-select-header

[bunjiboys]

Actual Behavior:

• What is the issue? *
  When opening the mdSelect drop down, the list is scrolled past the mdSelectHeader which effectively hides it, when the list is long enough to start scrolling
• What is the expected behavior?
  The mdSelectHeader should be at the top of the drop down panel

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: Is present with the default CodePen (forked at http://codepen.io/bunjiboys/pen/ryRwQv)
• Details:

AngularJS Versions: *

• AngularJS Version:
  1.5.11
• AngularJS Material Version:
  1.1.3

Additional Information:

• Browser Type: *
  Google Chrome
• `Browser Version: *

Google Chrome	56.0.2924.87 (Official Build) (64-bit)
Revision	0e9a9a6f3676ae439b78cd9b3f62b4193c3ac7d5-refs/branch-heads/2924@{#895}
OS	Mac OS X 
JavaScript	V8 5.6.326.50

• OS: *
  macOS Sierra 10.12.3 (16D32)
• Stack Traces:
  N/A

---

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.

[markwpiper]

+1

It's possible to work around this by setting the .scrollTop of the md-content inside the md-select-menu, on a delay triggered by md-on-open.

Coffeescript workaround:

scope.onOpen = ()->
  opened = false
  scrollSelectHeaderInView = ->
    el = $("md-select-menu md-content._md")
    if !opened && el.length > 0
      opened = true
      el[0].scrollTop = 0
  $interval(scrollSelectHeaderInView, 40, 10, false)
  opened

[alonetech]

for ios put the below css :

md-select-menu md-content {
    -webkit-overflow-scrolling: auto !important;
}

[Splaktar]

This is reproducible with AngularJS Material 1.1.7 and AngularJS 1.6.7 as well.