Viewport Units Buggyfill Versions Save

Making viewport units (vh|vw|vmin|vmax) work properly in Mobile Safari.

v0.4.0

9 years ago

This release is brought to you by Zoltan Hawryluk!

  • fixes IE9 and Safari native way of calculating viewport units differently inside of a frame. Without this buggyfill, IE9 will assume the 100vw and 100vh to be the width and height of the parent document’s viewport, while Safari for iOS will choose 1px (!!!!) for both.
  • fixes IE9's issue when calculate viewport units correctly when changing media-query breakpoints.
  • adds vmin support for IE9 (instead of vm, IE9's equivalent to vmin) and vmax support to IE9 and 10. (Note that this will only work when initializing with viewportUnitsBuggyfill.init({hacks: window.viewportUnitsBuggyfillHacks, behaviorHack: true});) and adding the viewport-units-buggyfill.hacks.js to the page after viewport-units-buggyfill.js.
.myLargeBlock {
  /* Non-IE browsers */
  width: 50vmin;
  height: 50vmax;

  /* IE9 and 10 */
  behavior: 'use_css_behavior_hack: true; width: 50vmin; height: 50vmax;';
}
  • adds the ability for viewport units to be used inside of calc() expressions in iOS Safari and IE9+, via the use of the content CSS property. This seems like a good compromise since content is only valid inside ::before and ::after rules (as a result, it is not recommended use this hack inside of these rules). (Note that this will only work when initializing with viewportUnitsBuggyfill.init({hacks: window.viewportUnitsBuggyfillHacks, contentHack: true});) and adding the viewport-units-buggyfill.hacks.js to the page after viewport-units-buggyfill.js.
.box {
  top: calc(50vh - 100px);
  left: calc(50vw - 100px);

  /*
   * Here is the code for WebKit browsers that will allow
   * viewport-units-buggyfill.js to perform calc on viewport
   * units.
   */
  content: 'use_css_content_hack: true; top: calc(50vh -  100px); left: calc(50vw -  100px);';
}
  • Using the above 'contentHack' trick, one can also add support for vmax support in Safari for the older iOS6
  • Adds support for viewport units inside of IE's filter property (a.k.a. Visual Filters).
  • Added debounce initialization parameter, if it is desirable to not have IE9+ fire the polyfill so many times on a resize event.

v0.3.1

10 years ago
  • fixing browser detection to include UIWebView - Issue #7, tylerstalder

v0.1.0

10 years ago
  • Initial Version

v0.2.0

10 years ago
  • optimizing generated CSS (by grouping selectors)
  • adding browser sniffing

v0.2.1

10 years ago
  • adding force option to init()
  • fixing the handling of non-iterable CSSRules - Issue #1

v0.2.2

10 years ago
  • fixing unhandled empty <style> elements - Issue #2

v0.2.3

10 years ago
  • fixing multiple competing media-attribute-switched stylesheets - Issue #5
  • fixing double initialization and call of reresh() without being initialized - Issue #3
  • fixing <br>s caused by innerText by using textContent instead

v0.3.0

10 years ago
  • fixing cross origin resource problem with CSSOM - Issue #6