Funciona esto en > iOS 5?

.element {
    background: url(images/myImage.jpg) 50% 0 no-repeat fixed;
}

Pensé que debería ser, pero hasta ahora no lo es.

  • De qué manera no funciona (no se fija, no de fondo, etc.)?
  • La imagen de fondo no parece ser fijo. Se desplaza con el contenido.
  • He eliminado mi comentario anterior, solo ver mi respuesta.
  • Tengo el mismo resultado. Esto es extraño.
  • Lo mismo con mi respuesta?
  • El mismo, voy a mantener la depuración.
  • los labios no es duplicado. Esto es acerca de la propiedad background-attachment, su enlace es acerca de la posición fija. Ambos son completamente diferentes propiedades.

InformationsquelleAutor Dylan | 2012-03-19

3 Comentarios

  1. 13

    De acuerdo a este background-attachment matriz de compatibilidad, no.

    Otro post sugiere que venir para arriba con una solución para dispositivos móviles no es la pena:

    …de Android y iPhone bloque de temporizadores o de procesamiento durante el desplazamiento, por lo que el
    el efecto es que los divs se mueven con el desplazamiento de la página y sólo después,
    finalmente, divs volver en la posición esperada. Esto está en contra de la posición de la idea fija

    • Lástima, espero que esto será apoyado pronto. Voy a intentar una propiedad diferente.
  2. 27

    Que potencialmente puede conseguir alrededor de esto, el uso de un elemento separado y position: fixed que funciona!

    HTML:

    <div id="Background"></div>
    
    <div id="Content"></div>

    CSS:

    #Background {
        background: #000 url("img/Background.jpg") no-repeat 50% 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1
    }
    • Agregue esto a #de Fondo: z-index: -1;
    • No sé por qué esto no ha sido upvoted antes de ahora – esta es la manera correcta de manejar el problema, vale la pena mentionig aquí que background-attachment no puede ser cambiado, no OBSTANTE de la manera correcta para obtener el resultado deseado es <img id="bg-img" src="foo.jpg" /> con #bg-img { position: fixed }
    • Semánticamente, seguro; si es una imagen, utilice una etiqueta de imagen. Sin embargo, hay varias ventajas a la utilización de background-image. Por la configuración de la top, bottom, left, y right propiedades, nos aseguramos de que todo el área de visualización está cubierto por la #Background elemento, sino a la propia imagen no se pueden estirar. Usted puede utilizar background-position para alinear la imagen en la parte inferior derecha (si se desea) y background-size a la escala de la imagen a la ventana.
    • naturalmente, usted está en lo correcto, pero mi punto era que a pesar de que hay algunas diferencias, el 99% de los casos de uso para fijar el posicionamiento buscado a través de la imagen de fondo de posicionamiento se puede lograr con un codificado de posición de imagen fija (que funciona en iOS, a diferencia de background-position / attachment).
    • Sí, todo depende de que el código y el resultado final deseado. Un position: fixed imagen daría un poco más de flexibilidad en la colocación y manipulación con scripts / animaciones, pero si el único problema es llegar background-position: fixed trabajando en iOS, ya que ya se configuró como un background-image en el CSS, entonces usted puede utilizar las consultas de medios para establecer la #Background elemento position: fixed y mantener background-position: fixed capaz navegadores.
    • Este es un hack, pero es totalmente las obras.
    • ¿alguien sabe por qué esta solución, que hace el trabajo, inicialmente se muestra un espacio en blanco en la parte inferior de la iOS navegador cuando se desplaza hacia abajo, pero cuando suelte el dedo el espacio en blanco es llenado por el fondo? Como si el hack está quedando…
    • El ‘lag’ es en realidad Mobile Safari no actualizar nada con position: fixed hasta que el desplazamiento se detiene. Mismo con el real window.scrollTop valores, al menos en las versiones más antiguas. remysharp.com/2012/05/24/… En iOS7, parece mantener fijas las cosas en su lugar si el desplazamiento es por debajo de una cierta velocidad. Si el usuario pasa rápidamente, el elemento volverá a aparecer una vez que el impulso se detiene.
    • Esto es genial y todo, pero lo que si desea que el fondo sea el centro, la parte superior y fijo.. es por eso Que usted necesita background-attachment:fixed junto con background-position:center superior;
    • Ajustar el fondo de la posición dentro de la #Background estilos anteriores. Algo como esto: #Background { background-image: url("img/Background.jpg"); background-repeat; no-repeat; background-position: center top; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1 }

  3. 0

    Hay demasiados problemas con la posición fija en el móvil y dispositivos táctiles.

    Siempre que el fondo no está animada en cualquier forma(desenfoque, css transiciones de cualquier JS) Y como siempre no hay ninguna barra de desplazamiento, entonces es útil y coherente.

    Todo lo demás-dependiendo del navegador resultado en resultados no deseados, pixelación de la imagen, las imágenes de escala de 100 veces en los dispositivos IOS, «saltando» divs etc.

    El mejor trabajo de todo método que he encontrado hasta ahora, dicen, si desea reproducir un fijo BG desplazar la página, es utilizar el método de paralaje, tener un div como el desplazamiento, la siguiente con fondo transparente, enjuaga y repite el proceso.

    Parece bastante bueno creo yo, y no hay plugins necesarios.

Dejar respuesta

Please enter your comment!
Please enter your name here