PageSpeed Insights - vh and vw cannot be used?

[Tymoteusz Pudlik]

Hello,

I have an issue with rendering site: http://smsapi.pl/ by PageSpeed Insights. I am using container with vh units. In the container there is vertically centered content. It is prepared as below:

.full-page-container {
    height: 800px; // fixed value for older browsers
    height: 100vh;
}

.full-page-content {
    display: block;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

I have checked it on few older/modern browsers and it works properly. Looks like PageSpeed Insights has a problem with vh/vw units and it reads only the last value for CSS class (so it does not read height: 800px). The result of it is that .full-page-container has height set to 0 and .full-page-content is showing above the viewport.

When I've removed height: 100vh -  it renders properly with pixels height. Is there any information about that kind of issue? Maybe vh/vw units are not recommended by Google?

Thanks.

[Rick Steinwand]

Considering the spotty browser support, I'd go back to the "old school" way for now: http://caniuse.com/#feat=viewport-units