android - Ratchet 模态有问题

Question

我是 Ratchet 的新手。最近我做了一个 Web 应用程序，发现模态框在 Android 资源管理器和 iOS 资源管理器上显示不同。

通常 Modals 可以有顶栏(http://cnratchet.com/components/#modals)，但在 iOS 平台上不能出现。我已经在我的 iPad mini (Retina) 上试过了。但是在我的安卓(HTC)手机上可以正常显示。 没有顶部栏及其关闭按钮。所以 iOS 用户很难关闭模式。

这是我的 HTML 头部部分:

<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Set a shorter title for iOS6 devices when saved to home screen -->
<meta name="apple-mobile-web-app-title" content="Ratchet">
<!-- Roboto -->
<link rel="stylesheet" href="//fonts.lug.ustc.edu.cn/css?family=Roboto:400,500,700">

<link rel="stylesheet" href="Application/Home/View/Public/css/ratchet.min.css"> 
<link rel="stylesheet" href="Application/Home/View/Public/css/ratchet-theme-ios.min.css">
<!--<link rel="stylesheet" href="Application/Home/View/Public/css/ratchet-theme-android.min.css"> -->
<script src="Application/Home/View/Public/js/ratchet.min.js"></script>
<script src="Application/Home/View/Public/js/push.js"></script>
<!--<script src="Application/Home/View/Public/js/slide.js"></script>-->

由于我的声誉有限，我无法附上我的图片。

那么有没有人可以分享解决方案？或者它可能是 Ratchet-2.0.2 中的一个错误？

Answer 1

我认为您可以通过将此规则添加到您自己的 CSS 来修复它。

header.bar.bar-nav {
  -webkit-transform: translateZ(0);
}