Why does Modernizr.cssvhunit not work in iOS7 when using portrait orientation?

Question

I am trying to use Modernizr to detect whether or not viewport units are supported in the browser.

Here is my test:

if(!Modernizr.cssvhunit) {
    alert('viewport units are not supported');
}

I am aware viewport units are not supported in iOS7, so this is where I need a fallback.

When I load a page in iOS7 on an iPad in landscape orientation, the alert is executed.

However, if I load the page in portrait orientation, I don't see the alert.

Why does the condition only work in landscape? Is this a known bug with Modernizr?

Answer 1

I don't have an answer but I did figure out an alternative solution.

I added a test for cssvmaxunit and the condition works in both portrait and landscape.

// if viewport units aren't supported
if(!Modernizr.cssvhunit || !Modernizr.cssvmaxunit) {
    alert('viewport units are not supported');
}

I figure if the browser doesn't support vmax, then it likely doesn't support vh.

Answer 2

iOS7 had problems with viewport units. Especially with viewport height. CanIUse.com also lists this buggy behaviour:

partial support in iOS7 is due to buggy behavior of the "vh" unit (see workaround).

http://caniuse.com/#search=viewport%20units

iOS8 supports viewport units perfectly fine but there is a filed bug in modernizr about it. Modernizr says iOS8 Safari does not support vhunits even though it does. But it seems there are problems to fix this right now.

Answer 3

Had the same issue myself, managed to find this article which has a good solution. Theres a small script which detects this weird middle ground of support and puts a class on html. Works exactly the same as Modernizr

https://github.com/vasilisvg/crazy-vh-test/