Chrome中的Angular Material Datepicker打开位置错误答案

【问题标题】：Angular Material Datepicker opening position is wrong in ChromeChrome中的Angular Material Datepicker打开位置错误
【发布时间】：2017-05-10 13:11:02
【问题描述】：

当在 Chrome 中查看时，Angular Material 的 md-datepicker 元素在默认日期的错误日历位置（例如未来一两个月）打开。同样，如果选择年份视图，它会从默认日期打开一两年。

这篇文章 (Angular material datepicker position is wrong except on Chrome) 提出了与这个问题相反的问题，奇怪的是，它在 Chrome 中有效，但在其他浏览器中被破坏。对该问题的回复表明它已针对 FireFox、IE 和 Safari 进行了修复。

在 Chrome 桌面和 Android 上测试，结果相同（损坏）。

这里有两个单独的 Codepen 存储库显示了问题。

http://codepen.io/anon/pen/pjGPGZ?editors=101

http://codepen.io/DionOrr/pen/pNmQzb

第二个链接的代码是：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<body ng-app="myApp">
  <div ng-controller="myController">
    <p>Inside md-input-container
      <br>
      <md-input-container>
        <label>Test datepicker</label>
        <md-datepicker ng-model="testdate1" md-placeholder="Enter date"></md-datepicker>
      </md-input-container>
      <br>
      <md-input-container>
        <label>Test datepicker</label>
        <md-datepicker ng-model="testdate2" md-placeholder="Enter date"></md-datepicker>
      </md-input-container>
      <br>
      <md-input-container>
        <label>Test datepicker</label>
        <md-datepicker ng-model="testdate3" md-placeholder="Enter date"></md-datepicker>
      </md-input-container>
      <br>
      <md-input-container>
        <label>Test datepicker</label>
        <md-datepicker ng-model="testdate4" md-placeholder="Enter date"></md-datepicker>
      </md-input-container>
      <br>
      <md-input-container>
        <label>Test datepicker</label>
        <md-datepicker ng-model="testdate5" md-placeholder="Enter date"></md-datepicker>
      </md-input-container>
      <br>
      <md-input-container>
        <label>Test datepicker</label>
        <md-datepicker ng-model="testdate6" md-placeholder="Enter date"></md-datepicker>
      </md-input-container>
      <br>
      <md-input-container>
        <label>Test datepicker</label>
        <md-datepicker ng-model="testdate7" md-placeholder="Enter date"></md-datepicker>
      </md-input-container>
      <br>
      <md-input-container>
        <label>Test datepicker</label>
        <md-datepicker ng-model="testdate8" md-placeholder="Enter date"></md-datepicker>
      </md-input-container>
    </p>
    <p>Not inside md-input-container
      <br>
      <md-datepicker ng-model="testdate9" md-placeholder="Enter date"></md-datepicker>
      <br>
      <md-datepicker ng-model="testdate10" md-placeholder="Enter date"></md-datepicker>
      <br>
      <md-datepicker ng-model="testdate11" md-placeholder="Enter date"></md-datepicker>
      <br>
      <md-datepicker ng-model="testdate12" md-placeholder="Enter date"></md-datepicker>
      <br>
      <md-datepicker ng-model="testdate13" md-placeholder="Enter date"></md-datepicker>
      <br>
      <md-datepicker ng-model="testdate14" md-placeholder="Enter date"></md-datepicker>
      <br>
      <md-datepicker ng-model="testdate15" md-placeholder="Enter date"></md-datepicker>
      <br>
      <md-datepicker ng-model="testdate16" md-placeholder="Enter date"></md-datepicker>
    </p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-animate.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-aria.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-messages.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var app = angular.module('myApp', ['ngMaterial', 'ngMessages']);
    app.controller('myController', function($scope) {
      $scope.testdate1 = new Date();
      $scope.testdate2 = new Date();
      $scope.testdate3 = new Date();
      $scope.testdate4 = new Date();
      $scope.testdate5 = new Date();
      $scope.testdate6 = new Date();
      $scope.testdate7 = new Date();
      $scope.testdate8 = new Date();
      $scope.testdate9 = new Date();
      $scope.testdate10 = new Date();
      $scope.testdate11 = new Date();
      $scope.testdate12 = new Date();
      $scope.testdate13 = new Date();
      $scope.testdate14 = new Date();
      $scope.testdate15 = new Date();
      $scope.testdate16 = new Date();
    });
</script>

请在 Chrome（桌面或移动设备）上打开它们，特别是尝试页面下方的日期选择器。

这个问题 (github.com/angular/material/issues/5055) 暗示了 Angular Material 日期选择器的类似问题，并将其归因于错误地放置在 md-input-container 中。但是上面的第二个 codepen 链接特别表明，无论 datepicker 是否在 md-input-container 中，问题都会再次出现，因此在这种情况下排除了该答案。

有简单的解决方法吗？

【问题讨论】：

它在正确的位置打开

标签： angularjs datepicker

【解决方案1】：

是的，这似乎是 Chrome 上的一个问题。见Issue #10144。我已提交Pull Request #10177 来解决此问题，但尚未合并。

您的 CodePen 已修复：Basic Usage Fixed。

我在我的分支上添加了一个依赖项：

https://rawgit.com/ppham27/material/dist/dist/angular-material.js

并将 Angular 的版本更新到 1.5.9 并使用新的样式表。

这当然是临时修复。永久修复需要等待拉取请求通过。我不确定是否有任何方法可以加快这个过程。

【讨论】：