Angular material datepicker position is wrong exce

Question

I am using angular-material and md-datepicker in my project.

I'm having a form, containing several inputs and <md-datepicker> and the problem is that the position of the datepickers (the calendar, not the initial input) is wrong except for the first one if I'm not using Google Chrome.

The position seems to be correct if all the <md-datepicker> are at the top of the page next to each other, but as soon as we need to scroll down a bit, the positioning is failing.

Here is a codepen where you can see the issue on Firefox : http://codepen.io/anon/pen/pjGPGZ?editors=101

Just scroll down and try to use the datepickers.

Answer 1

I just tried your codepen on chrome, firefox and safari. Everything worked fine, I got no issues.

Answer 2

As Gianni pointed out, it has been Fixed by : https://github.com/angular/material/commit/d423a65600cb6dc2638c91882b38be2dfea965f8