VH and VW units can cause issues on iOS devices. To overcome this, create media queries that target the width, height, and orientation of iOS devices.

styles.scss

@mixin vh($heightPercentage) {
  /**
 * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
 *
 * To overcome this, create media queries that target the width, height, and orientation of iOS devices.
 * It isn't optimal, but there is really no other way to solve the problem.
 *
 * iOS Resolution Quick Reference: http://www.iosres.com/
 *
 * Original gist at from here: https://gist.github.com/pburtchaell/e702f441ba9b3f76f587
 */

  height: #{$heightPercentage}vh;
  /**
   * iPad with portrait orientation.
   */
  @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    height: round(1024 * $heightPercentage / 100)px;
  }

  /**
   * iPad with landscape orientation.
   */
  @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
    height: round(768 * $heightPercentage / 100)px;
  }

  /**
   * iPhone 5
   * You can also target devices with aspect ratio.
   */
  @media screen and (device-aspect-ratio: 40/71) {
    height: round(500 * $heightPercentage / 100)px;
  }
}