Something wrong with the Modal of Ratchet

Question

I'm new on Ratchet. Recently I made up a Web app and found that the Modals displayed differently on Android explorers and iOS ones.

Normally Modals can have a top bar(http://cnratchet.com/components/#modals), but on iOS platform it cannot occur. I have tried it on my iPad mini (Retina). But on my Android(HTC) phone it can be shown normally. There is no top bar as well as its button to close. So it's hard for iOS users to close modals.

This is my head part of the 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>-->

Because of my limited reputation, I cannot attach my images.

So does anyone have a solution to share? Or maybe it is a single bug in Ratchet-2.0.2?

Answer 1

I think you can fix it by adding this rule to your own CSS.

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