Estoy tirando de mi pelo en este caso.¿IE (7?) Distorsiona los fondos de los sprites?
Estamos a punto de terminar con el desarrollo de una revisión de nuestro sitio. Como último paso, estamos tratando de envolver todos los glifos e íconos en un sprite. Todos son transparentes .png así que el sprite también. Parece que si un fondo proviene de un sptire, IE lo distorsiona. Si proviene del archivo original, no es así. FF y Chrome están bien de cualquier manera.
Estoy mirando la imagen de orignal y la versión de sprited, lado a lado, con cuadrículas para ver que los píxeles son idénticos. He contado los píxeles en el sprite muchas veces para asegurarme de que estoy usando las coordenadas correctas. Mi CSS se ve así:
XXbackground: url(sprite.png) no-repeat 0px -837px; /* lozRedRedSpacer */
background: url(lozRedRedSpacer.png) no-repeat;
El 'XX' me permite alternar entre sí. Con la versión de archivo único, se ve perfecto: 
. La versión de sprite tiene el siguiente aspecto: 
. Parece que está "aplastado" tanto vertical como horizontalmente. Esto no ocurre en FF o Chrome.
¿Alguna idea?
EDITAR I fue capaz de pelar hacia fuera la mayor parte del ruido y publicar un ejemplo here. He agregado notas al ejemplo para describir mi problema.
¡Muchas gracias por tomarse el tiempo para mirar esto!
ACTUALIZACIÓN Hemos puesto sustituyen estas 'imágenes superpuestas divisor' con CSS pseudo-clases que realmente se superponen y la cuestión de zoom parece haber desaparecido. Por supuesto, ahora tenemos nuevos problemas: IE8 obtiene el orden z incorrecto e IE7 no comprende los elementos psuedo en absoluto. Pero al menos el marcado es más simple y el problema del acercamiento desapareció.
Para mí, eso se ve menos "aplastado" y más como un desplazamiento de un píxel a lo largo de ambos ejes. Tener un desplazamiento x de cero píxeles no concuerda con eso, pero probablemente valga la pena verificar dos veces tus cálculos de sprites, si es que aún no lo has hecho. –
@Ben: Es una gran sugerencia y hemos estado hablando con los números. Cuando movemos la Y hacia arriba o hacia abajo 1px, vemos claramente una línea negra horizontal arriba o abajo de la que esperaríamos al perder la imagen. ¡En este caso, la distorsión incluso aparece 'subpíxel' si eso es posible! – n8wrl
¿Puedes obtener un ejemplo de trabajo que muestre el problema, en algún lugar como jsfiddle.net, por ejemplo? Es extraño; parece que algo está agregando un efecto de bisel de alguna manera. –