force - La posición de fondo CSS no funciona en Mobile Safari(iPhone/iPad)
video autoplay iphone safari (6)
Aparentemente, cuando se "desplaza" en un iPhone / iPad, no se desplaza la página de la misma manera que lo hace en un navegador de escritorio. Lo que estás haciendo es más como mover toda la página dentro de una ventana gráfica. (Estoy seguro de que alguien me corregirá si estoy usando la terminología incorrecta aquí).
Esto significa que la posición de fondo: corregida aún es "compatible" pero no tiene ningún efecto real, ya que toda la página se está moviendo dentro de la ventana gráfica en lugar de que el contenido de la página se desplace dentro de la página.
Tengo un problema con la posición de fondo en el safari móvil. Funciona bien en otros navegadores de escritorio, pero no en iPhone o iPad.
body {
background-color: #000000;
background-image: url(''images/background_top.png'');
background-repeat: no-repeat;
background-position: center top;
overflow: auto;
padding: 0px;
margin: 0px;
font-family: "Arial";
}
#header {
width: 1030px;
height: 215px;
margin-left: auto;
margin-right: auto;
margin-top: 85px;
background-image: url(''images/header.png'');
}
#main-content {
width: 1000px;
height: auto;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
background-image: url(''images/content_bg.png'');
background-repeat: repeat-y;
}
#footer {
width: 100%;
height: 343px;
background-image: url(''images/background_bottom.png'');
background-position: center;
background-repeat: no-repeat;
}
Tanto "background_top.png" como "background_bottom.png" se desplazan demasiado hacia la izquierda. He buscado en Google, y por lo que puedo decir, la posición de fondo se admite en safari móvil. También he probado todas las combinaciones de palabras clave ("top", "center", etc.), px y%. ¿Alguna idea?
¡Gracias!
Actualización: aquí está el marcado en el archivo .html, que muestra el diseño y la multa de diseño en otros navegadores: (También actualicé el css anterior)
<html lang="en">
<head>
<title>Title</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="header"></div>
<div id="main-content"></div>
<div id="footer"></div>
</body>
</html>
Ambas imágenes de fondo son muy amplias (~ 2000px) para ocupar espacio en cualquier navegador de tamaño.
PD: Sé que probablemente haya algunos atajos de CSS más eficientes que podría estar usando, pero por ahora me gusta tener el código organizado como lo tengo para la visibilidad.
Cree un ID de envoltorio para colocar en el cuerpo, luego incluya el siguiente CSS:
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url(''../images/compressed/background-mobile.png'');
background-repeat: no-repeat;
background-attachment: scroll;
}
Solo asegúrate de que ninguno de tus contenidos se encuentre dentro del div. De lo contrario, toda la página se solucionará sin desplazamiento.
El navegador de iPhone / Webkit no puede alinear las imágenes de fondo cuando se coloca en la etiqueta del cuerpo. La única forma de evitar esto es eliminar la imagen de fondo de la etiqueta de tu cuerpo y usar un DIV adicional como envoltorio.
#wrapper {
background-color: #000000;
background-image: url(''images/background_top.png'');
background-repeat: no-repeat;
background-position: center top;
overflow: auto;
}
<html lang="en">
<head>
<title>Title</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main-content"></div>
<div id="footer"></div>
</div>
</body>
</html>
Esto podría ser causado por las dimensiones de su sprite (s). Consulte http://teknocat.org/blog/computer-stuff/web-development/show/6/mobile-safari-background-image-scaling-quirk para obtener una descripción completa y posibles soluciones.
Funcionará con
background-position-x: 50%;
background-position-y: 0%;
y aun así añadir
background-position: center top;
para otros navegadores.
Tengo este problema y lo soluciono deshaciéndome de mi pie de página fijo usando un estilo separado como se menciona aquí: ¿Cómo seleccionar CSS para iPad pero excluir el escritorio de Safari 4 mediante una consulta de medios?