Making viewport units (vh|vw|vmin|vmax) work properly in Mobile Safari.
This release is brought to you by Zoltan Hawryluk!
100vw
and 100vh
to be the width and height of the parent document’s viewport, while Safari for iOS will choose 1px (!!!!) for both.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;';
}
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);';
}
filter
property (a.k.a. Visual Filters).force
option to init()
<style>
elements - Issue #2
<br>
s caused by innerText
by using textContent
instead