iOS系统上Chrome,Safari定位问题

Question

HTML代码如下

<div id="log" role="dialog" class="modal fade" tabindex="-1" aria-labeledby="logModalLabel" style="margin-top: 20px;">
        <div class="modal-dialog" style="background-color: #fff;margin: 0 auto;">
            <div class="swiper">
                <div class="modal-content eml-cnt" data-index="1">
                    <div class="modal-header">
                        <button class="close" role="button" aria-label="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">
                            <span>Y.</span>
                            <span>Y.</span>
                            <span>N<i style="color: #38A821;">i</i><strong style="color: #FBBC05;">e</strong></span>
                        </h4>
                    </div>
                    <div class="modal-body">
                        <h3>登录</h3>
                        <div>使用您的账号</div>
                        <div class="tip-wraper">
                            <div class="tip">电子邮件地址</div>
                        </div>
                        <div class="frm">
                            <input type="email" class="form-control eml" tabindex="0" autofocus name="email">
                            <div class="botm"></div>
                            <div></div>
                        </div>
                        <div class="log-btns clearfix" style="height: 32px;">
                            <div style="display: inline-block;line-height: 32px;">
                                <span style="color: rgb(66, 133, 244);font-size: 16px;">更多登录方式&nbsp;<strong class="fa fa-angle-down"></strong></span>
                            </div>
                            <button class="btn btn-primary jump">跳过</button>
                            <button class="btn btn-primary next">下一步</button>

                        </div>
                        <div class="otherlog">
                            <ul>
                                <li><span class="fa fa-qq"></span></li>
                                <li><span class="fa fa-weixin"></span></li>
                                <li><span class="fa fa-weibo"></span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="modal-content eml-waiting" style="padding: 0;">
                    <div class="modal-body" style="padding: 0;">
                        <canvas id="wait" width="450px" height="500px" style="background: #fff;"></canvas>
                    </div> 
                </div>
                <div class="modal-content pwd-cnt" data-index="1">
                    <div class="modal-header">
                        <button class="close" role="button" aria-label="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">
                            <span>Y.</span>
                            <span>Y.</span>
                            <span>N<i style="color: #38A821;">i</i><strong style="color: #FBBC05;">e</strong></span>
                        </h4>
                    </div>
                    <div class="modal-body">
                        <h3>登录</h3>
                        <div>请输入密码</div>
                        <div class="tip-wraper">
                            <div class="tip">密码</div>
                        </div>
                        <div class="frm">
                            <input type="password" class="form-control pwd" tabindex="0" autofocus name="paswd">
                            <div class="botm"></div>
                            <div></div>
                        </div>
                        <div class="log-btns clearfix" style="height: 32px;">
                            <div style="display: inline-block;line-height: 32px;">
                                <span style="color: rgb(66, 133, 244);font-size: 16px;">更多登录方式&nbsp;<strong class="fa fa-angle-down"></strong></span>
                            </div>
                            <button class="btn btn-primary jump">跳过</button>
                            <button class="btn btn-primary next">下一步</button>
                            <button class="btn btn-primary pre">上一步</button>
                        </div>
                        <div class="otherlog">
                            <ul>
                                <li><span class="fa fa-qq"></span></li>
                                <li><span class="fa fa-weixin"></span></li>
                                <li><span class="fa fa-weibo"></span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="modal-content eml-going" style="padding: 0;">
                    <div class="modal-body" style="padding: 0;height: 100%;">
                        <canvas id="go" width="450px" height="500px"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS代码

#log .modal-dialog {
    position: relative;
    width: 450px;
    height: 500px;
    overflow: hidden;
}
#log .modal-content {
    display: inline-block;
    width: 450px;
    height: 500px;
    border-radius: 0;
    padding: 40px;
    border: 0;
    vertical-align: middle;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow:  0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
#log .swiper {
    position: absolute;
    width: 1800px;
    height: 500px;
    font-size: 0;
    transform: translateX(0);
    -webkit-transition: transform 0.6s ease-in 0s;
    -moz-transition: transform 0.6s ease-in 0s;
    -ms-transition: transform 0.6s ease-in 0s;
    -o-transition: transform 0.6s ease-in 0s;
    transition: transform 0.6s ease-in 0s;
    transform: translateX(0px);
}

swiper下面有四个modal-content，swiper总宽度为1800px，绝对定位在modal-log中。PC上chorme与ff显示均正常：

但是ios上显示却成了下面这个样子：

按说第一个modal-content也就是输入邮箱页面在显示出来才对啊
调试了半天不知道什么原因，求解答