JQuery mobile page height issue with safari

JQuery mobile page height issue with safari

I'm trying to code a simple html page with a JQuery-mobile header and a map (using nokia here map api).

I want the map to fit the whole screen, so I tried to compute its height by taking the screen height and then subtracting the header height. After some attempts to get the right size, the result is good on every browser I tried except on Safari for Ipad: with the latter, the map has the right size, but the page can scroll a little if you touch the header and you can see about ten "extra pixels".

Here's the code (I have omitted the script to load the map):

  1. <div id="home" data-role="page" class="ui-responsive-panel" data-theme="a">
  2.       <div data-role="header" id="header" data-position="fixed" data.theme="b">
  3.             <h3>HEADER<h3>
  4.       <div>
  5.       <div data-role="content">
  6.             <div class="ui-grid-solo" id="map">
  7.                   <div class="ui-block-a" id="bigMapContainer">
  8.                   </div>
  9.             </div>
  10.       </div>
  11. </div>


  1. $(window).ready(function (){
  2.       var maxWidth = $(window).width();
  3.       var maxHeight = $.mobile.getScreenHeight();
  4.       var headerHeight = $('#header').outerHeight(true);
  5.       var mapHeight = maxHeight - headerHeight;
  6.       $('#map').css("height",mapHeight);
  7. }
I'm really getting crazy with this issue, since I really doesn't understand why the other browser seem to perform well the code. Does anyone has some tips?