AngularJS Material Dialog在Mac Safari中无法正常显示

问题描述：

我是AngularJS Material Design的新手我在Mac Safari中遇到了一个问题。我有一个对话框显示给用户，并且该对话框即将到来，除了Mac Safari之外的所有浏览器都没有任何问题。AngularJS Material Dialog在Mac Safari中无法正常显示

它是怎么显示在其他浏览器

它是怎么显示在Mac的Safari浏览器

我曾试图通过提供一些解决方法等，以解决这个问题“flex-shrink：0”“flex-basis：auto;”但似乎没有任何工作。

这里是我的代码的微型版本或使用code pen。任何帮助或建议，高度赞赏。

main.html中

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script> 
    <style> 
     .flexfix { 
      flex-shrink: 0; 
      flex-basis: auto; 
     } 
    </style> 
    <script> 
     var dialogApp = angular.module('latestDialogApp', ['ngMaterial']); 

     dialogApp.controller('AppController', function ($scope, $mdDialog) { 
      $scope.TestString = "App Has been initialted"; 

      $scope.showCustomDialog = function() { 

       $mdDialog.show({ 
        templateUrl: 'login.dialog.2.html', 
        parent: angular.element(document.body), 
        clickOutsideToClose: true, 
       }); 

      }; 
     }); 
    </script> 
</head> 
<body ng-app="latestDialogApp" ng-controller="AppController"> 
    <div layout="column" layout-fill layout-align="center center"> 
     <div layout="row" layout-align="center center"> 
      {{TestString}} 
     </div> 
     <div layout="row" layout-align="center center"> 
      <md-button class="md-raised md-warn" ng-click="showCustomDialog()" type="button">Show Dialog</md-button> 
     </div> 
    </div> 

</body> 
</html>

login.dialog.2.html

<md-dialog class="flexfix"> 
    <form ng-cloak class="flexfix"> 
     <md-toolbar> 
      <div layout="row" layout-align="space-between center" flex="100" layout-fill class="md-toolbar-tools"> 
       <md-button class="md-raised md-warn custom-back-Btn">Back</md-button> 
      </div> 
     </md-toolbar> 

     <md-dialog-content class="flexfix"> 
      <div layout="column" class="flexfix"> 
       <div layout="row" layout-align="center center" class="flexfix"> 
        <h3>Login Dialog</h3> 
       </div> 
       <div layout="row" layout-fill layout-margin class="flexfix"> 
        <md-input-container class="md-block" layout-xl="column"> 
         <label>Email</label> 
         <input name="username" ng-model="dialog.username" md-autofocus required /> 
        </md-input-container> 
       </div> 
       <div layout="row" layout-fill layout-margin class="flexfix"> 
        <md-input-container class="md-block" layout-xl="column"> 
         <label>Password</label> 
         <input type="password" name="password" ng-model="dialog.password" required /> 
        </md-input-container> 
       </div> 
      </div> 
     </md-dialog-content> 

     <md-dialog-actions layout="column" class="flexfix"> 
      <div layout="row" flex="100" layout-fill layout-margin class="flexfix"> 
       <md-button class="md-raised md-warn" layout-fill>Login</md-button> 
      </div> 
      <div layout="row" layout-fill layout-margin layout-align="center center" class="flexfix"> 
       <label>OR</label> 
      </div> 
      <div layout="row" layout-fill layout-margin class="flexfix"> 
       <md-button class="md-raised md-primary" layout-fill>Login Option 2</md-button> 
      </div> 
      <div layout="row" layout-fill layout-margin class="flexfix"> 
       <md-button class="md-raised md-primary" layout-fill>Login Option 3</md-button> 
      </div> 
      <div layout="row" layout-fill layout-margin layout-align="center center" class="flexfix"> 
       <a href="" class="md-primary custom-center-margin"> I Forgot My Password </a> 
      </div> 
      <div layout="row" layout-fill layout-margin layout-align="center center" class="flexfix"> 
       <h6>About Us</h6> 
       <h6>Terms</h6> 
      </div> 
     </md-dialog-actions> 
    </form> 
</md-dialog>

[此问题]（https://github.com/angular/material/issues/10516）可能有关 – troig

不确定这是否有用，但

@MikeFeltman：我试过了，但没有奏效 – wizzardz

答

尝试加入这个CSS

.flex { flex : 1 1 0%; }

和

-webkit-box-direction: normal; 
-webkit-box-orient: vertical;

，你还可以点击此链接 https://github.com/angular/material/issues/1720

答

我猜问题是layout="column"在其儿童flex值。我在IE中遇到了这个问题，我猜它和Safari一样。要么指定一个高度，以便孩子知道他们相对于什么弯曲，或者（在我看来更好）是删除layout="column"和儿童的flex值，并使用正常的文档流程，因为div会自动垂直堆叠无论如何，该对话框应随内容一起增长。减少layout和flex属性的数量也有助于布局性能 - IE中的BIG问题。

长话短说 - 从来没有挠曲一个孩子在父母有layout="column"，除非父母有一个高度（或弯曲），因为一些浏览器会缩小孩子。

AngularJS Material Dialog在Mac Safari中无法正常显示

相关推荐