Question

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

通常情况下，模态可以有一个顶栏（http://cnratchet.com/components/#modals），但在iOS平台上它不会发生。我在我的iPad mini（Retina）上试过了。但是在我的Android（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);
}

棘轮模式出了点问题

1 个答案: