html - google - Fondo de posición fija en iOS
como usar google drive en iphone (4)
Tengo un sitio web que tiene un fondo fijo de imagen completa que el contenido "flota" más arriba. Funciona bien en los navegadores de escritorio, pero el fondo fijo termina desplazándose en iPads y otras tabletas. Esto parece ser un problema común, pero luego encontré este sitio web, que parece tener un fondo fijo incluso en el iPad.
http://confitdemo.wordpress.com/
¿Alguna pista de cómo están logrando eso? Lo intenté:
#content-wrapper.posts-page {
background-attachment: fixed !important;
background-clip: border-box;
background-color: transparent;
background-image: url("image path");
background-origin: padding-box;
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
}
(Esto fue copiado de Firebug, razón por la cual no es taquigrafía).
Pero no tuvo suerte. ¿Alguien me apunta en la dirección correcta?
1) z-index: -1; debe agregarse al segundo enfoque de Breezer si tiene imágenes de enlace, de lo contrario, las imágenes se mantendrán ocultas (detrás del fondo)
2) En el mismo enfoque, tuve que colocar el div antes del resto del contenido de la siguiente manera o la página no se podía desplazar si el contenido se agrega dentro de las etiquetas div:
<body> <div id="fixedbg"></div> <!-- CONTENT HERE --> </body>
Creo que el problema radica en que es muy probable que su tabla cambie el tamaño del fondo, por lo que si agrega estas declaraciones, lo más probable es que funcione correctamente.
background-attachment: fixed !important;
background-size: cover !important;
Editar:
Si esto no funciona, solo otra razón que se me ocurre es que ios debe cambiar el tamaño del cuerpo para que sea tan grande como el contenido, lo que debes hacer es crear un div dentro de la etiqueta del cuerpo con las propiedades correctas
#fixebg{
background: url(image.jpg) top;
height:100%;
width:100%;
position:fixed;
}
Aquí hay una solución similar:
Edición - 2:
Agregó un violín que puede comprobar:
Y aquí está el enlace para probarlo en tu ipad:
Ese sitio web utiliza un truco en los navegadores móviles, aprovechando el hecho de que mientras background-attachment: fixed no funciona, la position: fixed sí lo hace, así que en los navegadores móviles solo crea un <div> que permanece fijo detrás del contenido de desplazamiento.
ok, así que ya construyo ese sitio, la parte con un fondo fijo se desordenaría si lo envolvía en un div para darle a ese div una posición fija. Así que escribí esto y funciona en el iPhone.
Tengo un encabezado fijo, así que fue fácil de usar, pero cualquier cosa que esté siempre en la parte superior de la ventana gráfica hará ...
if (//on mobile) {
var headerH, headerH2, viewportH, sliderH, res
viewportH = $(window).height(),
headerH2 = 80 //correction when measuring with fixed header,
$topheader = $(''.top_header''),
$slider = $(''#twinslider'') //the element to check for if in viewport;
function getH() {
headerH = $topheader.offset().top;
sliderH = $slider.offset().top;
res = (((headerH - headerH2) - sliderH) + viewportH) / viewportH;
if (res > 0 && res < 1.4) {
return res; // thats truthy and a value for further calculation
} else {
return false;
}
}
getH();
setInterval(function(){ // before i listened to scroll, but this was better for performance
if (getH()) {//if slider is in viewport
$slider.find(''li'').css({ //the element to set the background pos for
''background-position'': ''center '' + res * 50 + ''%''
}, 100);
}
}, 25);
}
y luego le da al elemento para darle a un ''fondo fijo'' una transición en la posición de fondo y listo. Aunque no tan bien ... y siento que hay una solución mejor ... pero esto funciona.