iOS media query pollyfill for iOS vh unit quirks - accepts an additional px value to be appended and calculated to the vh value

sass-ios-vh-pollyfill-mixin

@mixin vh-polyfill($property, $vh, $add: null) {
  // all iOS viewports that don't support vh
  $portrait: "all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)"; // iPad with portrait orientation.
  $landscape: "all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)"; // iPad with landscape orientation.
  $iphone5: "screen and (device-aspect-ratio: 40/71)"; // iPhone 5 You can also target devices with aspect ratio.
  $iphone4: "screen and (device-width: 320px) and (device-aspect-ratio: 2/3) and (orientation:portrait)"; // iPhone 4
  
  // base vh value with no additional px values calculated
  @if $add == null {
    #{$property}: $vh * 1vh;
    
    // loop through each media query and assign it's corresponding height
    @each $media-query, $height in ($portrait, 1024px), ($landscape, 768px), ($iphone5, 500px), ($iphone4, 480px) {
      @media #{$media-query} {
        #{$property}: #{$height} * $vh / 100;
      }
    }
  }
  
  // base vh value + px value added using css calc function 
  @else {
    // if add is a positive number
    @if $add > 0 {
      #{$property}: calc(#{$vh * 1vh} + #{$add});
    }
    
    // if add is a negative number
    @else {
      #{$property}: calc(#{$vh * 1vh} - #{$add * -1});
    }
  
    // loop through each media query and assign it's corresponding height
    @each $media-query, $height in ($portrait, 1024px), ($landscape, 768px), ($iphone5, 500px), ($iphone4, 480px) {
      @media #{$media-query} {
        #{$property}: (#{$height} * $vh / 100) + $add;
      }
    }
  }
}