datepicker: calendar not showing when browser is zoomed and md-max-date is in the past
Bug, feature request, or proposal:
Tested on Macbook Pro 2015 - Firefox, Chrome.
When zooming the browser out to anything less than 100% for Chrome, a date-picker who's max-date is set to a date before today will not display the calendar on initial load. Upon scrolling, the calendar appears.
What is the expected behavior?
The calendar should appear on initial load, regardless of zoom level.
What is the current behavior?
Calendar is blank on date-picker when browser is zoomed out to any percent on Chrome. Firefox is more picky and required, in my setup, to be zoomed out to 67%.
CodePen and steps to reproduce the issue:
CodePen Demo which shows your issue: https://codepen.io/anon/pen/oEQOJX
Detailed Reproduction Steps:
- create a standard Material date-picker
- Set md-max-date to a date BEFORE today
- Zoom browser out to any level for Chrome (should be <100%), for my setup Firefox needs to be zoomed out to 67%
- Click on date-picker input arrow to open widget
- Issue should present itself
What is the use-case or motivation for changing an existing behavior?
Causing UX issues when calendar is blank.
Which versions of AngularJS, Material, OS, and browsers are affected?
As far as I'm aware, all versions. Specifics: Material: <=1.1.7 AngularJS: <=1.6.7 OS: MacOS High Sierra Browser: Chrome <= 64, Firefox <= 58
Is there anything else we should know? Stack Traces, Screenshots, etc.
From my debugging, it seems unlikely to be an issue with the virtual repeat, but rather an issue with how datepicker interacts with the virtual repeat. Seems likely to be some sort of race condition. Here are some screenshots:
Source: angular/material