iPhone上的Safari在页面右侧添加了一个黑色空间，重点放在输入上，设备从水平旋转到垂直

Question

iOS版本：7.1.2浏览器：Safari

我有一个示例登录页面，其中包含两个输入字段和一个提交按钮。 当我在横向模式下专注于任何输入字段并旋转手机并进入纵向模式时，我会在页面右侧看到一个奇怪的黑色空间。 屏幕截图如下：

我的页面代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>IOS Test</title>
    <style type="text/css">
        a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var
        {
            background: transparent;
            border: 0 none;
            font-size: 100%;
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            vertical-align: top;
        }
        ol, ul
        {
            list-style: none;
        }
        blockquote, q
        {
            quotes: none;
        }
        table, table td
        {
            padding: 0;
            border: none;
            border-collapse: collapse;
        }
        img
        {
            vertical-align: top;
        }
        embed
        {
            vertical-align: top;
        }
        article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video, div
        {
            display: block;
        }
        mark, rp, rt, ruby, summary, time
        {
            display: inline;
        }
        input, textarea
        {
            border: 0;
            padding: 0;
            margin: 0;
            outline: 0;
        }
        iframe
        {
            border: 0;
            margin: 0;
            padding: 0;
        }
        input, textarea, select
        {
            margin: 0;
            padding: 0;
        }

        body
        {
            font-family: Arial, Myriad Pro, Trebuchet MS, sans-serif;
            font-size: 100%;
            background: #F5F5F5;
        }
        a
        {
            text-decoration: none;
        }
        a:hover
        {
            text-decoration: none;
        }
        img, object, embed, video
        {
            max-width: 100% !important;
        }
        .clear
        {
            display: block !important;
            width: 100% !important;
            clear: both !important;
        }
        .body
        {
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            overflow-y: scroll;
            -ms-overflow-style: -ms-autohiding-scrollbar;
            -webkit-overflow-scrolling: touch;
            -ms-touch-action: pan-y;
            -ms-user-select: none;
            z-index: 0;
        }
        .body > *
        {
            -webkit-transform: translateZ(0px);
        }
        .header
        {
            background: #fff;
            text-align: center;
            border-bottom: #45A116 solid 8px;
            padding: 5% 10%;
        }
        .content
        {
            width: 70%;
            position: relative;
            margin: 20% auto 10% auto;
            text-align: center;
        }
        .content input
        {
            display: block;
            background: #E6E6E6;
            border-radius: 15px;
            border-bottom: #A8A8A8 solid 3px;
            margin-bottom: 5%;
            width: 96%;
            padding: 4% 2%;
            text-align: center;
            color: #595959;
        }
        .content a
        {
            display: inline-block;
            padding: 2% 10%;
            color: #fff;
            background: #45A116;
            margin-top: 5%;
            border-radius: 5px;
            border-bottom: #2C690E solid 3px;
            -webkit-transition: all 0.1s linear;
            -moz-transition: all 0.1s linear;
            -ms-transition: all 0.1s linear;
            -o-transition: all 0.1s linear;
        }
        .content a:active
        {
            background:#368011;
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function adjustBody() {
            var wh = $(window).height();
            $(".body").css({
                "height": wh + "px"
            });
        }

        $(document).ready(function () {
            adjustBody();
            $(window).resize(function () {
                adjustBody();
            });
        });
    </script>
</head>
<body>
    <div class="body">
        <div class="header">
            <img src="data:image/jpeg;base64,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"
                alt="Sample Logo" />
        </div>
        <form action="" method="get" id="sampleForm">
        <div class="content">
            <input type="email" value="User Name" onblur="if($(this)[0].value == ''){$(this)[0].value = 'User Name';}"
                onfocus="if($(this)[0].value != '' && $(this)[0].value == 'User Name'){$(this)[0].value = ''};" />
            <input type="password" value="Password" onblur="if($(this)[0].value == ''){$(this)[0].value = 'Password';}"
                onfocus="if($(this)[0].value != '' && $(this)[0].value == 'Password'){$(this)[0].value = ''};" />
            <a href="javascript:void(0);" onclick="$('#sampleForm').submit();">Login</a>
        </div>
        </form>
    </div>
</body>
</html>

Answer 1

删除这些样式将摆脱问题：

.body {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  overflow-y: scroll;
}

我不确定为什么要使用这些样式，因为它们不会在布局中添加任何内容，而是会在您描述的情况下破坏样式。

（我在iPhone上对此进行了测试以确认。）