ios - 为什么 Material 设计对话框主体在 iPad 上没有高度

Question

我有一个使用 angularjs 和 material-design 的网络应用程序。

我使用 md-dialog 从数据库中添加和编辑某些记录。对于除 IE 之外的所有浏览器，这是响应式的，并且在我的桌面上按预期工作(不足为奇)。它应该是这样的。

但是，如果我在 Mac 上的 safari 或 iOS 上的任何浏览器(包括 chrome)中运行应用程序，对话框似乎缺少内容(有没有高度)。

虽然 IE 没有完全相同的问题，但看起来确实相似。所以，我认为这是 iOS 如何呈现 flex 属性的问题。但是，我不确定也不知道如何在我的 iPad 上确认。

到目前为止，我的搜索还没有为这个问题提供任何可行的解决方案，但我看到其他人问过同样的问题(尽管不是通过堆栈)。

导致此问题的原因是什么？如何为 iPad 修复它？

更新

这是对话框在 html 中的呈现方式:

<md-dialog-content class="flex" id="dialogContent_140" flex>
    <form name="workerDialog" class="md-dialog-content ng-pristine ng-invalid-required ng-valid-mindate ng-valid-maxdate nd-valid-filtered ng-valid-valid ng-valid-minlength ng-valid-maxlength ng-valid-pattern ng-valid-unique" style>
        ...
    </form>
</md-dialog-content>

如果我像这样修改元素并删除 flex:

<md-dialog-content class="flex" id="dialogContent_140">

正文内容按预期显示(至少在 MAC 上)。

我还可以修改angular-material.min.css中的css，去掉-webkit-flex, -ms-flex, flex 并获得相同的结果。

[flex]{
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    box-sizing: border-box;
}

我无法为应用程序的其余部分完全杀死 flex，但我必须允许它在 iPad 上运行。

Answer 1

我找到了问题的原因。感谢@Tran Khanh Nguyen 让我朝着正确的方向前进。

定义对话框时，有人添加了<md-dialog-content flex> .我删除了 flex它解决了所有设备上的问题。