CSS Calc works in Chrome but not in Phonegap app on Android 4.4.2

Question

I use the following rule

.topbtns
{
 position:absolute;
 bottom:95vh;
 right:0;
 left:0;
 top:calc(95vh - 21vw - 1.2em);
 text-align:center;
}

which is used to position a pair of buttons bottom-center of the screen

<div class='topbtns'>
<div class='tear t-tosponsor'><div>View Storefront</div></div>
<div class='tear t-continue' id='btnContinue'><div>Continue</div></div>
</div>

This works perfectly in my Chrome browser on Windows - even with device emulation turned on. $('.topbtns')[0].getBoundingClientRect() returns

{top: 538.2374877929688, right: 375.20001220703125, bottom: 
 538.2374877929688, left: 0, width: 375.20001220703125…}

However, when I use the same HTML & CSS and build it into my Android Phonegap app .topbtns is nowhere in sight. The same getBoundingClientRect code returns

{height:111,width:360,left:0,right:360,bottom:-497.875,top:-60}

I thought this might be because

• The Android Webview does not understand vh units. However, I modified the rule to use `bottom:95vh;top:75vh} which worked perfectly.
• I also replaced calc with -webkit-calc but to no avail.

It is as though calc and its -webkit-calc cousin does not understand vh whilst the webview itself does.

I would be obliged to anyone who might be able to express what is going on here. Whilst writing this I have come across this - http://slides.com/html5test/the-android-browser#/. However, it is not clear to me that the WebView used by Phonegap is the one being discussed here.

Answer 1

I believe this could help you, the calc feature is not supported in some versions of Android (<= 4.4.4), so the problem is not Phonegap / Cordova, is the Device where you test that probably does not supported it