Material: md-datepicker on android and chrome not showing numbers in current HEAD 1.1.x

[dohomi]

Actual behavior:

• What is the issue?
  On Android phones the md-datepicker component shows only a white dialog box without any numbers. Scrolling is not working at all, the datepicker closes automatically. It is not possible to select any date.
• What is the expected behavior?
  Showing all numbers as expected on other devices

CodePen or Steps to reproduce the issue: *

• CodePen Demo which shows your issue :
  https://material.angularjs.org/HEAD/demo/datepicker
• Details:
  Open this page with my Sony XPeria

Angular Versions: *

• Angular Version: 1.5.x
• Angular Material Version: 1.1.rc-x

Additional Information:

• Browser Type: Chrome Android
• Browser Version: Chrome 50.0.2661.89
• OS: Android 5.1.1

[mckenzielong]

component shows only a white dialog box without any numbers

This is also happening on desktop if you can position the datepicker near the bottom of the screen.

[crisbeto]

I'll have a fix for it as a part of https://github.com/angular/material/pull/8541, but I'm trying to fix another issue before that.

[xuaninbox]

Having the same problem.

Also on desktop, where the date picker is in an md-dialog, the ui is a bit off.

[crisbeto]

@xuaninbox do you happen to have box-sizing: border-box applied to the calendar?

[xuaninbox]

@crisbeto Yep ur right! Thanks!

[crisbeto]

Great, thanks for confirming. There's an issue to address this as well.

[xuaninbox]

@crisbeto
.md-virtual-repeat-offsetter

actually have box-sizing: border-box; so have to overwrite that too to fix the shadow thing on the right.

.md-virtual-repeat-offsetter, md-calendar-month { box-sizing: initial !important; }