Imagen de fondo borrosa al escalar en iPad e iPhone

Question

Estoy creando una aplicación web en la que les permito a los usuarios acercar ciertas imágenes de fondo de 100x100px.

Cuando tocan dos veces la imagen, escalo la imagen al doble de su tamaño (-webkit-transform: scale (2)).

Cuando finaliza la transición, cambio la imagen de 100x100px con una imagen más grande de 200x200px. Por alguna razón, la imagen es muy borrosa.

Así que traté de usar una etiqueta img en lugar de una etiqueta div para mostrar mis imágenes. Aquí la imagen no es borrosa en absoluto. ¿Por qué es esto?

NECESITO utilizar imágenes de fondo para eludir el límite de memoria en el iPad y el iPhone (si utilizo etiquetas img, golpearé una pared de memoria).

¿Alguien me puede ayudar? Muchas gracias.

Answer 1

Im alegando 3 cosas:

1. la escala de un div estira los píxeles y no añadir más.
2. tamaño de fondo: contener; Le asegura que su imagen de fondo se muestra completamente
3. El div nunca cambia de tamaño.

---

1. Como se puede see here el div sigue siendo 200x200 píxeles
2. La imagen cambia de tamaño para ser 200x200 píxeles incluso si es 400x400 píxeles. See here
3. Casi demostrado en 1. la fuente sigue siendo nítida, pero javascript cree que el ancho y la altura son 200x200 píxeles.

---

Bueno por lo que para su solución:

Hay varias maneras.

Puede cambiar el ancho y alto en lugar de escalar. Esto no es nada bonito, o al menos tienes mucha suerte si a esta animación no le falta su lanzamiento (en iOS).

Algo más podría ser escalado y la detección webkitTranstionEnd

$('div').bind("webkitTransitionEnd", function() { 
    $(this).css({ 
     "-webkit-transform": "scale(1)", 
     "width": "400px", 
     "height": "400px" 
    }); 
    $(this).unbind("webkitTransitionEnd"); 
}); 

Recuerde a desenlazar el caso webkitTransitionEnd. De lo contrario, se duplica la llamada de función.

Pero lo que sucedió es la animación de vuelta.Así que tenemos que mantener el TRANSICIÓN en una clase para que podamos añadir y quitar cuando queremos:

div { 
    -moz-transition-duration: 0ms; 
} 
div.transition { 
    -moz-transition-duration: 200ms; 
} 

Y a continuación, añadir la clase cuando tenemos que animar:

setTimeout(function() { 
    $('div').addClass("transition"); 
    $('div').css({ 
     backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)', 
     webkitTransform: 'scale(2)', 
     mozTransform: 'scale(2)' 
    }); 
}, 3000); 

Y sacarlo de nuevo en webkitTransitionEnd

$(this).removeClass('transition'); 
$(this).css({ 
    "-webkit-transform": "scale(1)", 
    "width": "400px", 
    "height": "400px" 

}); $ (this) .unbind ("webkitTransitionEnd");

What ??! No debe agregar/eliminar la clase a tiempo? Qué ocurre.

A veces, el navegador necesita un poco de tiempo para asegurarse de que se agrega la clase. Por lo tanto, debe ajustar la configuración de css en un setTimeout (function() {...}, 0);

setTimeout(function() { 
    $('div').addClass("transition"); 
    setTimeout(function(){ 
     $('div').css({ 
      backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)', 
      webkitTransform: 'scale(2)', 
      mozTransform: 'scale(2)' 
     }); 
    }, 0); 
}, 3000); 

también cuando quitamos la clase:

$(this).removeClass('transition'); 
setTimeout(function(){ 
    $(this).css({ 
     "-webkit-transform": "scale(1)", 
     "width": "400px", 
     "height": "400px" 
    }); 
    $(this).unbind("webkitTransitionEnd"); 
}, 0); 

En tanto, ahora el problema es que es la ampliación y obtener borrosa y después de la escala se pone súper fuerte.

Lo que podemos hacer al respecto No lo sé, pero espero que te ayude en alguna parte.

Andreas