AngularJS 材质对话框在 Mac Safari 中无法正确显示
Posted
技术标签:
【中文标题】AngularJS 材质对话框在 Mac Safari 中无法正确显示【英文标题】：AngularJS Material Dialog not displaying properly in Mac Safari 【发布时间】：2017-10-07 18:07:54 【问题描述】：我是 AngularJS Material Design 的新手，我对 Mac Safari 中的一个问题感到震惊。我有一个要向用户显示的对话框，并且该对话框在除 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>
【问题讨论】：
this issue 可能是相关的 不确定这是否有帮助，但 内 @MikeFeltman：我试过了，但没用 【参考方案1】：尝试添加这个 css
.flex flex : 1 1 0%;
和
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
您还可以点击此链接 https://github.com/angular/material/issues/1720
【讨论】：
【参考方案2】：我猜问题出在 layout="column" 的子代上带有 flex 值。我在 IE 中遇到过这个问题，我猜这与 Safari 相同。要么指定一个高度，以便孩子们知道他们相对于什么弯曲，或者（在我看来甚至更好）是删除 layout="column" 和孩子身上的 flex 值，并且只使用正常的文档流，因为 div 将被堆叠垂直自动，对话框应该随着内容而增长。像这样减少layout 和flex 属性的数量也有助于提高布局性能——这是IE 中的一个大问题。
长话短说 - 从不在具有 layout="column" 的父级中伸缩子级，除非父级具有高度（或已伸缩），因为某些浏览器会缩小子级。
【讨论】：
以上是关于AngularJS 材质对话框在 Mac Safari 中无法正确显示的主要内容，如果未能解决你的问题，请参考以下文章