css:hover color bug

Question

I just noticed something weird, when creating a menu for a website. Take a look at this Fiddle which illustrates the problem.

Notice the small orange spot, to the right of the last letter when you hover on the menu-item.
Why is this occurring?

I can tone down the "orange effect" by lowering the contrast between the foreground and background color, but it does not solve the actual problem. Is this a bug, or is there a clever way to fix this?

I'm using Chrome on a Mac btw. I've noticed it doesn't occur in Firefox, so it's a browser-related issue.

Update
Thanks for the answers and suggestions on how to fix it! I accepted Marcel's answer as this seemed to be the most correct answer as to why it is occurring. I don't know if this is the case, but it seems to be a Webkit problem. If you notice the bug in any non-webkit browser, please say so, and I'll update this.

Answer 1

It seems to be a subpixel rendering artifact. Adding opacity:.9999; to the CSS rules for li a seems to resolve the issue.