棘轮模态有问题

Question

我是 Ratchet 的新手。最近我做了一个 Web 应用程序，发现 Modals 在 Android 浏览器和 iOS 浏览器上的显示方式不同。

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

这是我的 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);
}