Acolchado no deseado en la parte inferior de la página cuando se ingresa en el safari mobile.

Estoy trabajando con áreas de text en safari mobile y cuando se enfoca un área de text, la window gráfica parece agregar relleno debajo del documento. Al inspeccionar y seleccionar el área, no se resuelve en un elemento, ni siquiera en el nodo html.

No parece importar dónde está la zona de text en la pantalla o si está o no en position absoluta, el relleno siempre está presente cuando está enfocado. A veces tiene que desplazarse hacia abajo para que sea visible, pero lo ideal es que no sea posible hacerlo visible.

Agregué un ejemplo con las capturas de pantalla y el código a continuación. Hay una cubierta que es 100% ancho y alto para mostrar dónde están los límites regulares del documento y la zona de text está absolutamente posicionada en la parte inferior del cuerpo.

Desenfocado: Desenfocado

Centrado (con la flecha apuntando al relleno no deseado): introduzca la descripción de la imagen aquí

Código:

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

Apreciaría las ideas que tienen las personas. Gracias.

No creo que esto sea solucionable con CSS, parece ser Safari Chrome.

Cuando lo pruebo en un dispositivo real (6+), el espacio en la parte inferior es blanco. Jugué con algunos: styles de enfoque con posicionamiento, y descubrí que solo estaba cortando el contenedor.

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

Puedes jugar aquí. http://codepen.io/ArleyM/pen/NGmbWW?editors=110

En lo que respecta a una solución, este es un problema de layout, me pregunto si hay una forma de que pueda utilizar este espacio en blanco para su ventaja. Los usuarios se centrarán en lo que están ingresando, puede hacer que esto se vea bien 🙂

Parece que la function de zoom de input de iPhones provoca que el relleno …

Comtesting las respuestas aquí: Desactiva el Zoom automático en la label "Texto" de input – Safari en iPhone

Parece que al configurar la fuente de campo de input a 16px se deshabilita esta function.

En la parte superior de sus styles css, agregue esto:

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

Siempre debe hacer un restablecimiento en la parte superior de sus styles.