title: Zurb Foundation 6 reveal modal adds vertical spacing on mobile devices
body: <p>I am using Zurb Foundation 6.3.0 and have come across the following issue. The reveal modal receives the following inline styles when opened both in chrome both in desktop and in responsive mode.</p>
  
  <pre><code>element.style {
      display: block;
      top: 0px;
      left: 0px;
      margin: 0px;
  }
  </code></pre>
  
  <p>However if I open the website using remote debugging for my android device the inline styles are set as the following.</p>
  
  <pre><code>element.style {
      display: block;
      top: 60px;
      left: 0px;
      margin: 0px;
  }
  </code></pre>
  
  <p>This causes the modal to move 60px further down than it should and display the content behind the modal. What would be causing the inline styles to be set differently on android device?</p>
  
  <p>This is a result of the calculation done by <code>foundation.reveal.js</code>:</p>
  
  <pre><code>var height = this.$element.outerHeight();
  var outerHeight = $(window).height();
  
  if (this.options.vOffset === 'auto') {
    if (height &gt; outerHeight) {
      top = parseInt(Math.min(100, outerHeight / 10), 10);
    } else {
      top = parseInt((outerHeight - height) / 4, 10);
    }
  }
  </code></pre>
  
  <p>If the element height is greater than the window height, it sets the <code>top</code> property for the element to be 1/10th of the window height. If the element height is not greater than the element height then the <code>top</code> value is set to 1/4th of the difference between the window height and the element height. </p>
  
  <p>In this case the height of the element is calculated as being greater than the window height (even though it should be set as 100vh). Therefore the position of the element is being set as ~ 1/10th of the window height.</p>