CSS3 Bugs - Issues when using transform:rotate rul

Question

I've got a Wordpress site with some CSS3 rules applied to some images that rotate the images and have a hover effect on rollover too. Problems are showing up in Safari & Firefox when you hover on and then off these images and I can't seem to locate any similar issues by people on the Interwebs.

See http://tinyurl.com/3n2eude and hover on and then off the images (the slightly rotated ones):

• Member name goes blurry and then back to normal (Firefox)
• Member image border becomes jagged (Firefox)
• A big black line displays to the side of the member images sometimes when you hover back and forth between two member images (Safari)

If I disable the transform:rotate rules, it's all fine. So seems to be an issue with that rule. Just can't work out how to get around it.

Anybody got some ideas on how I could get around these or what might be causing it?

Thanks for any ideas you might have!

Answer 1

Bit old of a question but that problem is related with rendering on browser (from what I understood). It cannot be fixed on CSS/HTML side. It must be fixed on user side.

Fix: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/
More information about problem: CSS3 rotate - rendering problems in Firefox and Safari