viewport unit vh is recalculating only on horizontal resize(not vertical). Chrome

Question

I have a website that relies on viewport sizes in "slide" containers, but after vertical resize of window heights are not recalculated. Horizontal and mixed scrolls forces to recalculate vh in right order. vw is recalculated correctly on horizontal resize.

Can I fix it or make a js enforcer of recalculation of re-render on resize?

Chrome 30, mac os x 10.9.

Answer 1

The code below will force viewport units to be recalculated on resize...

var altcrement = -1;
$(window).resize(function(){
    var currentFontSize = parseFloat($('html').css('font-size'));
    $('html').css('font-size', currentFontSize + (altcrement *= -1) + 'px');
});

Answer 2

Try this jQuery plugin: https://github.com/draashurx/viewportfontsize

Easily implemented:

$('p').vw(10); // Equals to css font-size: 10vw;
$('p').vh(5);  // Equals to css font-size: 5vh;

It also recalculates perfectly. Non browser-dependent. So guarantee to work (with jQuery library).