html - maximum - meta name viewport content width device width initial scale 1 user scalable no
En Safari Mobile 10.3, el pie de página adhesivo se puede desplazar desde la pantalla (5)
Nuestra aplicación web móvil tiene una navegación de fondo adhesivo como la que a menudo se encuentra en las aplicaciones de iOS, y después de la versión de Safari 10.3 en el paisaje, solo es posible desplazar la navegación adhesiva (pie de página) fuera de la pantalla. Aunque está en position: fixed y configurado en la bottom: 0 tampoco era posible en versiones anteriores de Safari.
Los estilos para navegación / pie de página son los siguientes:
footer {
position: fixed;
height: 50px;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 0, 0, 0.7);
}
DEMO para probar en el teléfono
En modo retrato, siempre está visible:
En el modo horizontal, puede desplazarlo fuera de la pantalla para el tamaño de la barra de direcciones superior:
¿Alguien ha encontrado ese problema? Agradecería cualquier ayuda para mantener el pie de página en la pantalla. Gracias
Esto es más una solución alternativa que una solución real. Sin embargo, la position: fixed ha sido un problema para los dispositivos móviles durante años y la mejor manera de superar este problema es usar la position: sticky .
stickycomporta comoposition: relativedentro de su parent, hasta que se cumpla un umbral de offset determinado en la ventana gráfica.
De: ¡ Pegue sus aterrizajes! posición: tierras pegajosas en WebKit
Sin embargo position: sticky aún no es totalmente compatible, por lo que sugeriría usar también:
position: sticky; /* currently in development for MS Edge */
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
Vea el estado here para el estado de soporte sticky MS Edge (gracias Frits )
html,
body {
height: 200%;
}
body {
background-image: linear-gradient(180deg, #ededed 0px, #ededed 9px, #000000 9px, #000000 10px);
background-size: 100% 10px;
}
footer {
position: sticky; /* currently in development for MS Edge */
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
height: 50px;
top: 80%;
background: rgba(255, 0, 0, 0.7);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<footer>
</footer>
</body>
</html>
Hay otra forma de crear un elemento fijo en la parte inferior de la página:
Establezca el elemento <body> (o lo que sea que envuelva su encabezado, contenido y pie de página) para display: flex; height: 100vh display: flex; height: 100vh . A continuación, toma el pie de página y configúralo en margin-top: auto .
HTML:
<body>
<header>
</header>
<main>
<main>
<footer>
</footer>
</body>
CSS:
html {
height: 100%;
}
body {
height: 100%;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
Una solución diferente con el mismo marcado sería usar CSS Grid:
html {
height: 100%;
}
body {
height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
Para obtener lo mejor de ambos mundos, puede ajustar los estilos de cuadrícula CSS en un contenedor @supports(display: grid){} . Si Grid es compatible, el navegador tomará eso y de lo contrario recurrirá a Flexbox.
Lo mejor con esta técnica es que no se topará con contenidos superpuestos, problemas de acercamiento y que responda completamente desde el principio.
Hay un artículo sobre CSS Tricks sobre el tema: https://css-tricks.com/couple-takes-sticky-footer/
No hay nada que puedas hacer al respecto. El modo de paisaje de Safari hace que el contenedor con su contenido salga de la pantalla. Esto no es detectable y, por lo tanto, no es posible resolverlo. Traté de ilustrar lo que sucede:
La barra azul = barra de navegación de Safari
La barra amarilla = la barra de navegación de su aplicación
En lugar de reducir la altura del contenedor, Safari lo deja fuera de la pantalla.
Pruebe esto con el elemento de posición fija en su css:
transform:translate3d(0px, 0, 0);
-webkit-transform:translate3d(0px, 0, 0);
Tuve el mismo problema y lo solucioné de una manera que mi probador es feliz. No es una solución perfecta, pero está haciendo su trabajo.
Agregue un elemento vacío con algo de relleno o margen.
const _userAgent = navigator.userAgent.toLowerCase();
if (_userAgent.indexOf(''safari'') != -1) {
if (_userAgent.indexOf(''chrome'') == -1) {
$(''.myelem'').append(''<div class="my-5"></div>'');
}
}