iPad Grid formation bug

Hi i'm trying to recreate sample travel app template with sass. and i download the template, view the html code and recreate that, but the problem is i saw that the online version of the travel app demo work well on the ipad but when i create that same thing and preview via ipad browser it doesn't well aligned. this is the layout error i got

and this is the code i wrote

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test</title>
    <link href="/assets/css/app.css" rel="stylesheet" type="text/css">
    <script src="/assets/js/foundation.js"></script>
    <script src="/assets/js/app.js"></script>
  </head>
  <style>
    .menu-bar {margin-bottom: 0;}
    #sub-nav, .messages {border-right: 1px solid #eee;}
    .medium-grid-content {padding:1rem !important;}
    .main-content {background: #fff;}
  </style>
  <body>
    <div class="grid-frame vertical">
      <div class="grid-block shrink wrap">
        <div class="grid-content collapse small-12 medium-6">
          <ul class="menu-bar dark">
            <li><a href="#">zTravel</a></li>
          </ul>
        </div>
        <div class="grid-content collapse small-12 medium-6">
          <ul class="menu-bar dark">
            <li ui-sref-active="is-active"><a ui-sref="listings">Listings</a></li>
            <li ui-sref-active="is-active"><a ui-sref="photos">Photos</a></li>
            <li ui-sref-active="is-active" ><a ui-sref="reviews">Reviews</a></li>
          </ul>
        </div>
      </div>

      <div class="grid-block">
        <div class="grid-block show-for-medium medium-6">
          <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12697.758051669445!2d-121.95161!3d37.284716!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe18714a9ccfec34d!2sZURB!5e0!3m2!1sen!2sus!4v1417659982534" width="100%" height="1200px" frameborder="0" style="border:0"></iframe>
        </div>
        <div ng-class="['ui-animation']" ui-view class="grid-block small-12 medium-6 wrap main-content">

        </div>
      </div>
    </div>
  </body>
</html>

above sample code i create with the same classes used by F4A but remove all the angular thing from the project, only css grid, foundation.js and fastclick attached but it doesn't work well on iPad.

also i reduce the medium column count to 5 for the both of divs. but it doesn't align each other.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test</title>
    <link href="/assets/css/app.css" rel="stylesheet" type="text/css">
    <script src="/assets/js/foundation.js"></script>
    <script src="/assets/js/app.js"></script>
  </head>
  <style>
    .menu-bar {margin-bottom: 0;}
    #sub-nav, .messages {border-right: 1px solid #eee;}
    .medium-grid-content {padding:1rem !important;}
    .main-content {background: #fff;}
  </style>
  <body>
    <div class="grid-frame vertical">
      <div class="grid-block shrink wrap">
        <div class="grid-content collapse small-12 medium-5">
          <ul class="menu-bar dark">
            <li><a href="#">zTravel</a></li>
          </ul>
        </div>
        <div class="grid-content collapse small-12 medium-5">
          <ul class="menu-bar dark">
            <li ui-sref-active="is-active"><a ui-sref="listings">Listings</a></li>
            <li ui-sref-active="is-active"><a ui-sref="photos">Photos</a></li>
            <li ui-sref-active="is-active" ><a ui-sref="reviews">Reviews</a></li>
          </ul>
        </div>
      </div>

      <div class="grid-block">
        <div class="grid-block show-for-medium medium-6">
          <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12697.758051669445!2d-121.95161!3d37.284716!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe18714a9ccfec34d!2sZURB!5e0!3m2!1sen!2sus!4v1417659982534" width="100%" height="1200px" frameborder="0" style="border:0"></iframe>
        </div>
        <div ng-class="['ui-animation']" ui-view class="grid-block small-12 medium-6 wrap main-content">

        </div>
      </div>
    </div>
  </body>
</html>

This is the preview for the above code i got on iPad

This is the F4A online demo i check it on iPad (this work well).

for this project i add compass extension but i commented that line to check whether it affect on the grid. but i doesn't add any effect to the layout

// @import "compass";
@import "settings";
@import "foundation";

// Global Dependency

// @import 'app/globle/fonts';
@import 'app/globle/color';
@import 'app/globle/common';
// @import 'app/globle/mixin';

// Login

// @import 'app/login/index';

// Dashboard

// @import 'app/dashboard/index';
// @import 'app/dashboard/edit';
// @import 'app/dashboard/update';

// Profile

// @import 'app/profile/index';
// @import 'app/profile/edit';
// @import 'app/profile/update';

also it is better if you could add some grid guide to the doc. how this will work in various element and situations. how to format html. eg how to work with grid-block with grid-content.... etc.

zurb / foundation-apps

iPad Grid formation bug #479