datepicker UI wrong popup position when resize the screen (on android chrome only)

datepicker UI wrong popup position when resize the screen (on android chrome only)

Hi
I am new to Jquery and I am trying to implement the datepicker UI.
All is fine except one annoying issue I have on android OS Chrome browser (current version). 
When input field is positioned relative or absolute, datepicker pop up in another position usally more bottom especially if I resize the screen. 
 On firefox Android OS, Chrome Windows OS the popup position is fine.
With no positioning at all (no margins,paddings,top,left etc) this issue doesn't exist (all Browsers).
Is this a bug or am I missing something? 

I have tried a lot of solutions like this one:

or (2) changing meta viewport tag
 <meta name="viewport" content="width=1366"> --->  <meta name="viewport" content="device-width"> 

but without success


This is a simple version of what i mean  (scroll down to find the input field)
[and the corresponding HTML code]

<!doctype html>
<head>
  <meta name="viewport" content="width=1366">
  <link rel="stylesheet" type="text/css" href="jquery-ui.css">
  <script src="jquery.js"></script> 
  <script src="jquery-ui.js"></script> 
  <script>
  $(function() {
    $("#date").datepicker();
  });
  </script>
</head>

<body>
<div style="position:absolute; top:900px; left:200px;">
<input type="text" id="date">
</div> 
</body>

</html>

PS The problem doesn't appear with the first click sometimes.

I am struggling with this for 5 days..
 I would be very grateful if someone can help!

Tested on Nexus 7, 
Yorgos