android - studio - Fondo adjunto: fijo que interfiere con el tamaño de fondo

tamaño de imagen para fondo de pantalla para celular

Question

Tengo una imagen de fondo escalada para que quepa dentro de su contenedor, y tengo reservas adecuadas (no se muestran) para cuando Modernizr detecte que el navegador no admite el tamaño de fondo.

.wrap {
width: 200px;
height: 116px;
position: absolute;
background-image: url(image.jpg);
background-attachment: fixed;
background-position: 0 0;
background-size: 200px 116px;
background-repeat: no-repeat;
}

Aquí hay un ejemplo: http://jsfiddle.net/crowjonah/6xYNm/

Se ve hermoso en Chrome, Firefox, Safari (computadora de escritorio e iOS), sin embargo, estoy teniendo problemas en algunos casos de Android.

Aquí hay una UA para un dispositivo que se muestra correctamente:

Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Xoom Build/IMM76L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30

y aquí hay una UA para un dispositivo que no lo hace:

Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; sdk Build/JB_MR1.1) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

La versión más reciente de Android (emulada) escala la imagen de fondo fija para que se expulse y se pixelela para que se ajuste (creo) a la ventana gráfica, y no tiene en cuenta el tamaño de su contenedor o el background-size definido.

Y todo eso está bien. De hecho, eso es lo que MDN dice que sucederá :

Si el archivo adjunto de fondo es fijo, el área de posicionamiento de fondo es, en cambio, el área completa de la ventana del navegador, sin incluir el área cubierta por las barras de desplazamiento si están presentes.

Mi problema es que no sé cómo detectar razonablemente cuándo ese será o no el caso para poder ajustarme en consecuencia. Debido al diseño y las animaciones en la página, realmente quiero que el fondo se corrija para todos los navegadores que lo admiten bien, y puedo conformarme con el scroll en este caso externo si puedo averiguar cómo orientarlo.

Actualización (10/3/2013): Para evitar confusiones, he actualizado el violín para demostrar un ejemplo más realista y problemático que justifica más propiedades de CSS que he definido: http://jsfiddle.net/crowjonah/QtpVN/

Answer 1

Eliminar background-size Agregar display:block;

Y vuelve a intentarlo

Answer 2

Has probado

imagen de fondo: url (image.jpg); tamaño de fondo: 100%;

quita la posición: absoluto; adjunto de fondo: fijo;

Answer 3

podría preparar el CSS dentro de dos clases .works {...} y .does_not_work {...}, y luego revisar las cosas a través de JavaScript, para responder a la pregunta, en qué caso se enfrenta. Dependiendo del resultado, el JavaScript solo se ajustará a estas clases de CSS anteriores. Al final, ¿quién apagará JavaScript en su teléfono móvil (es decir, Android)? ¿Qué piensa usted acerca de esta idea? Saludos, M.