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

前端 未结 4 1533
眼角桃花
眼角桃花 2021-02-15 05:18

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

相关标签:
4条回答
  • 2021-02-15 05:23

    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

    0 讨论(0)
  • 2021-02-15 05:32

    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"

    0 讨论(0)
  • 2021-02-15 05:35

    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.

    0 讨论(0)
  • 2021-02-15 05:47

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

    0 讨论(0)
提交回复
热议问题