fix blurred vml background images in internet explorer (raphael)

I am using Raphael to create a vector shape and fill it with a background image.

The image is blurred in internet explorer. You can see this using ie 8 on the following url https://开发者_StackOverflow中文版justplay.thefa.com/

Does anyone know how to fix this?

Thanks

For anyone who finds this...I got to the solution to my particular problem after a day of trial and error. I read a remark someone made about another aspect of using vml which I remember having issues with in the flash days with fonts.

The problem arises when you are not using integers for your x/y points in a path. The line below gives an example of the last box as it was.

r.path('M4.5,24.875L175.5,17.95L175.5,136.598L4.5,132.125Z')

This was resolved by removing the sub pixel positioning which was causing ie to try and anti-alias the image across pixels

r.path('M4,25L175,18L175,136L4,132Z')

And we now have much nicer images

Have you tried using Raphael 2.0? I think it's still in beta stage, but I found that it's got improved VML capabilities.

Also be sure to test browser behavior with an uncompressed version of Raphael, as minified versions seem to have bugs. Instead, I've used Packer by Dean Edwards, which gave me a compressed and bug free version of the lib.