I tried to use VW and calc together and works but calculated only once: loading time:
http://codepen.io/anon/pen/mJOGbr
html{
font-size: calc( 16px + 2vw );
}
How can I force to evaluate that calc any time the browser window is resized? It is evaluated once, but never again. Without calc, the VM works fine...
Thanks in advance!
Note that if you are using an older webkit browser, this problem of not-resizing may occur indeed. See this post. (Scroll to "Bugs!")
The support is there in Chrome 20+ / Safari 6+, but it fails in one rather significant way. When the browser window is resized, the font doesn't adjust itself according to the new viewport size. The spec says:
When the height or width of the viewport is changed, they are scaled accordingly. I bugged it. Perhaps not a huge disaster as it's pretty much just us design nerds that go around adjusting browser windows, but still. The font does adjust on a fresh page load.
To fix this issue (allow resizing without page refresh) you need to cause a "repaint" on the element. I used jQuery and just fiddled with each elements (irrelevant, in this case) z-index value, which triggers the repaint.
causeRepaintsOn = $("h1, h2, h3, p"); $(window).resize(function() { causeRepaintsOn.css("z-index", 1); });UPDATE: Don't worry about this anymore and definitely don't be forcing those repaints. This resizing issue is fixed in Chrome 34+ and Safari 7+. It's not common to change the viewport size on mobile devices, so I'm not sure if this bug ever effected them or not.
