在iphone的Safari浏览器中一个小问题

<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-toggle="modal">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

        <h4 class="modal-title" id="title3">接通确认回柜</h4>

      </div>

      <div class="modal-body">

<!-- 弹窗内容开始 -->

<style>

.sunmt{height:15px; clear:both}

.sunpt{padding-top:7px}

.shiduan{background:#fafafa; margin:0 0 1em 3.5%; border:solid 1px #DDD; border-radius:0.35em; cursor:pointer; position:relative}

.shiduan h5{margin-bottom:5px; margin-top:7px}

.shiduan p{color:#999; margin-bottom:5px}

.shiduan span{position:absolute; right:12px; top:27px; color:#3e9317; font-size:1.2em}

.shiduan.clicked{background:#ffe1e1; border:solid 1px #ebc8c7}

.shiduan.current{background:#fafafa; border:solid 1px #3e9317}

@media all and (max-width: 767px) {

.shiduan{margin-left:6%}

.sunp .col-sm-9{position:absolute; left:55px; top:0}

}

</style>

<div class="container-fluid bg-white">

<div class="row">

<form class="form-inline">

<div class="col-sm-12 form-group row">

<label class="col-sm-3 control-label text-right sunpt" style="float:left;">预约日期</label>

<div class="col-sm-4"><input class="form-control" id="appointmentYMD" placeholder="年－月－日" type="text" style="width:150px !important;"></div>

</div>

<div class="col-sm-12 form-group row">

<label class="col-sm-3 control-label text-right sunpt" style="float:left;">预约时段</label>

<!-- <div class="col-sm-4" style="padding-top:7px;" id="pmCSS"><input name="after" id = "pm" type="radio" value="下午"/>下午</div> -->

<div class="col-sm-4" style="padding-top:7px; width:90px" id="amCSS"><input name="after" id = "am" type="radio" checked="true" value="上午"/>上午</div>

  <div class="col-sm-4" style="padding-top:7px;" id="pmCSS"><input name="after" id = "pm" type="radio" value="下午"/>下午</div>

</div>

<!-- <div class="sunmt hidden-xs"></div> -->

<div class="col-sm-12 form-group row">

<label class="col-sm-3 control-label text-right sunpt" style="float:left;">当天已预约</label>

<div class="col-sm-4" style="margin-top: 7px;">

<span id="num1"></span>

</div>

</div>

<div class="col-sm-12 form-group row">

<label class="col-sm-3 control-label text-right sunpt" style="float:left;">当天可预约</label>

<div class="col-sm-4" style="margin-top: 7px;">

<span id="num2"></span>

</div>

</div>

<div class="sunmt hidden-xs"></div>

<div class="col-sm-12 form-group row sunp" id="undetermined">

<label class="col-sm-3 control-label text-right">待定</label>

<div class="col-sm-9">

<input type="checkbox" id="_checkbox">

</div>

</div>

<div class="sunmt hidden-xs"></div>

                                 <div class="col-sm-12 form-group row">

                                 <label class="col-sm-2 control-label text-right">备注</label>

                                 <div class="col-sm-9"><textarea class="form-control" rows="3" id="note3"></textarea></div>

                                 </div>

<div id="hint3" style="color: red; height: 1px; position: absolute; left: 120px; top: 25em;"></div>

</form>

</div>

</div>

<!-- 弹窗内容结束 -->

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-rose" id="confirm3">确认</button>

        <button type="button" class="btn btn-default" data-dismiss="modal" id="close3">取消</button>

      </div>

    </div>

  </div>

</div>

是用的是bootstrap的modal显示弹窗,但是在弹窗中设置了一个预约日期的input标签,当点击input的时候网页版与其他浏览器都好用,仅仅手机和ipad的Safari浏览器点击时整个modal弹窗顶到了页面的最上方.请问这是什么原因导致的.