IE Background Image Rendering Bug

Question

In IE9 I'm getting this very strange rendering bug, as you can see in the image below. The arrows on the right are the correct ones, and the ones on the left are what IE displays intermittently.

It appears to be some sort of caching bug because when I use IE developer tools and turn always get from server on, or I use Shift+F5 to refresh they go back to the normal ones. But when I navigate off the page and come back to it they reappear in the errored form.

Another weird thing to note is that when the images are not displaying correctly and then I open developer tools they get redrawn correctly instantly.

I'm using jquery -chosen plugin and have added this CSS to change the arrow image. I've tried using both a .png and .jpg file.

b {
   background: url('../Images/Icons/down-arrow.png') no-repeat 0px 10px;
}

Image of the bug:

Any suggestions would be great.

Answer 1

I'm not exactly sure why this fixed it but before I was just editing the CSS file directly on the server. I ended up doing a complete rebuild of the application codebase and then pushing that to the server and now it seems to work. (Although there were no actual changes from what was on the server) I think it may have had to do with the application restarting when you push it to the server.

Answer 2

IE8 and IE9 aren't good at rendering transparent PNGs when you use the filter CSS attribute. If any part of the DOM above those PNGs has a filter, it might be causing rendering problems.