Zurb Foundation 6 reveal modal adds vertical spacing on mobile devices

Question

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.

element.style {
    display: block;
    top: 0px;
    left: 0px;
    margin: 0px;
}

However if I open the website using remote debugging for my android device the inline styles are set as the following.

element.style {
    display: block;
    top: 60px;
    left: 0px;
    margin: 0px;
}

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?

This is a result of the calculation done by foundation.reveal.js :

var height = this.$element.outerHeight();
var outerHeight = $(window).height();

if (this.options.vOffset === 'auto') {
  if (height > outerHeight) {
    top = parseInt(Math.min(100, outerHeight / 10), 10);
  } else {
    top = parseInt((outerHeight - height) / 4, 10);
  }
}

If the element height is greater than the window height, it sets the top 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 top value is set to 1/4th of the difference between the window height and the element height.

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.

Answer 1

This issue is also address in this answer: CSS3 100vh not constant in mobile browser .

In order to prevent the modal element to have a top value of greater than 0 is to add the attribute `data-v-offset="0"' to the element like this:

<div class="full reveal" data-reveal data-v-offset="0">
  <!-- content -->
</div>

This forces the value of the top property to be 0 as the calculations done in the foundation.reveal.js _updatePosition function are not made if the data-v-offset is set to 0 .

This and other plugin options are covered further in the Zurb Foundation docs .