当输入集中在移动野生动物园时,页面底部不需要填充

Question

当输入集中在移动野生动物园时,页面底部不需要填充

Mar*_*cus 8 html css safari mobile ios

我在移动safari上使用textareas,当一个textarea聚焦时,视口似乎在文档下面添加了填充.在检查和选择区域时,它不会解析为元素,甚至是html节点.

textarea在屏幕上的位置或者它是否绝对位置似乎并不重要,填充在聚焦时始终存在.有时您需要向下滚动才能使其可见,但理想情况下,根本不可能使其可见.

我在下面添加了一个屏幕截图和代码示例.有一个100%宽度和高度的封面,用于显示文档的常规边界,而textarea绝对位于正文的底部.

不聚焦:

聚焦(箭头指向不需要的填充):

码:

<html>
  <head>
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <style>
      html{
        background-color: gray;
      }

      body{
        width: 100%;
        margin: 0px;
      }

      #cover{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: block;
        background-color: green;
      }

      #textarea{
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 100px;
        display: block;
        margin: 0px;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div id="cover">Cover</div>
    <textarea id="textarea"></textarea>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

我很感激人们的见解.谢谢.

Answer 1

Arl*_*eyM 3

我不认为这可以用CSS解决，它似乎是Safari chrome。

当我在实际设备（6+）上测试它时，底部的空间是白色的。我尝试了一些带有定位的 :focus 样式，发现我只是切断了容器。

#textarea:focus {
  border-bottom: 14px solid red;
  bottom: -6px; //shows 1px of border
  //bottom: -7px; //shows no border
}

Run Code Online (Sandbox Code Playgroud)

你可以在这里玩。http://codepen.io/ArleyM/pen/NGmbWW?editors=110

就解决方案而言，这是一个设计问题，我想知道是否有一种方法可以利用这个空白来发挥自己的优势。用户将专注于他们输入的内容，您可以使其看起来不错:)

归档时间：	10 年前
查看次数：	1872 次
最近记录：	9 年，4 月前