Webkit+jQuery+SuperBGImage: imágenes de navegador completo no anti-aliasing

safari antialiasing

Question

Esta imagen ilustra mejor el problema:

Estoy personalizando un tema de WordPress que usa SuperBGImage. En Safari 5.1 y Chrome 13, al cambiar el tamaño de la ventana del navegador, las imágenes no se suavizan correctamente y los artefactos son claramente visibles. Puede comparar fácilmente la demo de SuperBGImage con el sitio de producción ...

Demostración de SuperBGImage vs. My Project

Agregué imágenes de demostración al sitio de WordPress (categoría personal) para una comparación directa. La imagen de las cerezas es la más obvia.

He estado trabajando en esto por un tiempo, y he intentado lo siguiente en vano:

1. Intentó agregar un borde de 2 píxeles a las imágenes de muestra, lo que resolvió un problema apenas relacionado con las transformaciones de CSS3.
2. Algoritmo de escala revertido, que había modificado para nunca recortar imágenes.
3. Se agregaron exactamente los mismos archivos de imagen utilizados en la demostración.
4. Intentó agregar una box-shadow para activar el suavizado.
5. Diff''d todos los JS y CSS modificados tratando de encontrar un posible descuido. ( image-rendering: optimizeQuality; y -ms-interpolation-mode: bicubic; han mantenido consistentemente intactos).
6. Confirmó que el SuperBGImage funciona como se esperaba con jQuery 1.3.2 (demo) y 1.6.2 (proyecto).
7. Creé una demostración simplificada y confirmé que el problema no está en mi SuperBGImage JS modificado. (La única diferencia es el método de cultivo).

Al ver la demostración de SuperBGImage, notará que el suavizado se produce aproximadamente medio segundo después de que haya liberado la ventana ajustada. Este sutil cambio está ausente de mi proyecto, aunque solía estar funcionando. ¿Alguien sabe qué podría causar esta diferencia?

A diferencia de la mayoría de los proyectos, lamentablemente no tengo esto en control de fuente así que no puedo retroceder a través de las revisiones para aislar el problema.

Para aquellos que quieran jugar con una demo simple: http://jsfiddle.net/4ZcPF/

Answer 1

La respuesta es usar esta propiedad CSS3:

-webkit-optimize-quality

Esta es la solución adecuada, aunque puede o no ser efectiva por las siguientes razones:

• La calidad de interpolación se consideró un detalle de implementación hasta hace muy poco tiempo (lo que significa que el navegador podría tener resultados aleatorios y ser válido según las normas de los organismos de normalización ).

• Esta propiedad fue fuertemente defendida por los artistas, en realidad porque querían poder desactivar el escalado de alta calidad para el arte de píxeles. Tomó más de un año de debate lograr que todos estuvieran de acuerdo.

• El parche de webkit se acaba de registrar para admitir esto en mayo de 2011, por lo que el tiempo para que esté realmente en una actualización de Safari que tengan los usuarios tardará un poco.

IE y Firefox han tenido soluciones de trabajo durante un tiempo bajo propiedades propietarias de CSS.

Finalmente, esta propiedad eliminará el prefijo webkit y se convertirá en un estándar en todos los navegadores.

Si desea los detalles sangrientos detrás del desarrollo, consulte este hilo: http://code.google.com/p/chromium/issues/detail?id=1502