All geek questions in one place

Undesirable add-on at the bottom of the page when input is focused on mobile safari

I work with text areas on mobile safari, and when the text field is focused, visibility seems to add an addition under the document. When checking and selecting a region, it does not allow an element or even an html node.

It does not seem to matter where the text field is on the screen or whether it is an absolute position, padding is always added when it is focused. You sometimes have to scroll down to make it visible, but ideally it shouldn't be possible to make it visible at all.

I added an example with screenshots and code below. There is a cover that has a width and height of 100% to show where the regular borders of the document are, and the text box is absolutely located at the bottom of the body.

defocused: Unfocussed

Focused (with arrow indicating unwanted filling): enter image description here

code:

<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>

I would appreciate any ideas that people have. Thanks.

+4
source share
3 answers

I don't think this is CSS solvable, it seems like Safari chrome.

When I test it on the device itself (6+), the space below is white. I played with some: focused styles with positioning, and found that I only cut off the container.

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

. http://codepen.io/ArleyM/pen/NGmbWW?editors=110

, , , , . , , :)

+3

, iPhones ...

: "Text" tag - Safari iPhone

, 16px .

+2

css :

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
}

reset

0

Source: https://habr.com/ru/post/1616221/

More articles:


All Articles