Viewport-units-buggyfill.js producing an inline style in conflict with SASS (modal heights @ medium)

[HoldenCreative]

Hi and thanks as always for an awesome framework.

The viewport-units-buggyfill.js includes a function which produces a style tag.

The style tag renders any "vh" value which exists in CSS as an explicit pixel value. For example, the default CSS rule in F4A for a modal height is 100vh, this is re-produced in the style tag as "height: 768px".

All good in terms of function but the use of the style tag produces a CSS cascading-importance issue with modals. The properties for a modal's height are:

%modal {
  height: 100vh;
  max-height: 100%;

  @include breakpoint(medium) {
    height: auto;
  }

Use of the style tag by buggyfill.js, then, overrides the value of "height: auto" at the medium breakpoint and above since height: 768px in an inline style is more authoritative then a normal CSS declaration.

Ultimately what this means is that the modal height is always being set to the full height of the viewport at medium breakpoints and above, instead of being sized to the content.

My quick fix, for now, is to declare !important in my SCSS for the medium breakpoint up, as well as in a few cases where I set an explicit height using the calc. property. This works, but it's a carpet-bombing approach... :)

I'm hoping that buggyfill can be updated to include "auto" cases when rendering vw and vh heights to the style tag. This would allow the cascade to continue mostly as expected.

Thanks!