CODEWITHSUNDEEP
htmlioscssmobilesafari
Marcus
Marcus

Reputation: 818

Unwanted padding at bottom of page when input focussed on mobile safari

I'm working with textareas on mobile safari and when a textarea is focussed the viewport seems to add padding underneath the document. When inspecting and selecting the area, it doesn't resolve to an element, or even the html node.

It doesn't seem to matter where the textarea is on the screen or whether or not it is absolutely position, the padding is always present when its focussed. You sometimes have to scroll down to make it visible, but ideally it shouldn't be possible to make it visible at all.

I've added an example with screenshots and code below. There is a cover that is 100% width and height to show where the regular bounds of the document are and the textarea is absolutely positioned at the bottom of the body.

Unfocussed: Unfocussed

Focussed (with arrow pointing to unwanted padding): 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'd appreciate any insights people have. Thanks.

Upvotes: 14

Views: 6813

Answers (4)

eboye
eboye

Reputation: 313

I've answered on another question with same issue.

But I'll answer it here also:

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

-webkit-fill-available;

makes the "magic"

Upvotes: -1

bfritz
bfritz

Reputation: 2422

That looks like iPhones input zoom feature causing that padding...

Check the answers here: Disable Auto Zoom in Input "Text" tag - Safari on iPhone

It seems setting the input field font to 16px disables this feature.

Upvotes: -2

The Beast
The Beast

Reputation: 1

At the top of your css styles add this:

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

You should always do a reset at the top of your styles

Upvotes: -4

ArleyM
ArleyM

Reputation: 853

I don't think this is solvable with CSS, it seems to be Safari chrome.

When I test it on an actual device (6+) the space at the bottom is white. I played with some :focus styles with positioning, and found I was only cutting off the container. 

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

You can play here. http://codepen.io/ArleyM/pen/NGmbWW?editors=110

As far as a solution goes this is a design problem, I wonder if there's a way that you can use this white space to your advantage. Users will be focussed on what they're entering, you can make this look good :)

Upvotes: 3

Related Questions