ios onsenui cursor pops above textfield - ios

Question

I wrote a small calculator app for some formulas using cordova and onsenui.This app works fine on android and iphone but when I am using it on an ipad, the blinking cursor keep popping up above the text field, just like in the image I have posted, the cursor should be in yellow Litres textfield but it pops above it. Here is the code for the viewform
<table border="0" cellpadding="0">
<tr style="height: 28px;">
<td style="padding-right: 8px;">Litres:</td>
<td align="center" style="background-color: #92D050; color: #000000;"><b>{{litres | setDecimal:3}}</b></td>
<td><b> Required</b></td>
</tr>
<tr>
<td style="padding-right: 8px;">Bag Size:</td>
<td><ons-text-input ng-model="bagsize" placeholder="0" ng-change="doCalc()" type="number" pattern="[0-9]*" inputmode="numeric" min="0" style="width: 80px; background-color: #FFFF00; color: #000000"></ons-text-input></td>
<td><b> Litres</b></td>
</tr>
<tr style="height: 28px;">
<td style="padding-right: 8px;">No of Bags Required:</td>
<td align="center" style="background-color: #92D050; color: #000000;"><b>{{totalbags | setDecimal:3}}</b></td>
<td><b> </b></td>
</tr>
</table>
Can someone tell me why it only happens with ipad, and how can I solve this issue?