Footer out of screen on iphone

referring to the following question made by me where i was asking on how could i fit the content between the header and the footer by setting content height minus footer height solved the problem but actually when i try to add the web site to Home screen on any iPhone the footer goes out of screen as the following:

As you can see the footer is visible only in part and to see it i have to scroll the whole page down (not the central content but the page) while that problem doesn't persist on web or Android devices..

I've tryed to subtract more pixels to content height if the device is an iphone but it had no effect, i've tryed the following code:

if (navigator.userAgent.match(/iPhone/i)) {
    $('.tableFixHead').addClass('tableFixHead-mobile');
}

.tableFixHead-mobile {
    max-height: calc(100vh - 500px) !important;
}

But the view remain still the same, the whole css and html code you can see in the following jsfiddle

from Footer out of screen on iphone