Why calc is not reevaluated when it is used for fo

Question

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!

Answer 1

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.