Font with strange shadow (blur) when Opacity is below 1 (Chrome Only)

Question

I'm using Bootstrap Tooltip Component, and noticed a strange behavior of text when opacity is below 1, only in Chrome. It's showing some kind of border, maybe to improve the readability, but in this case, it's more a bug than a help.

For reproduce the issue: (fine in FireFox, bad in Chrome)
fiddle

HTML Code

<p>
    First Paragraph
</p>
<p id='StrangeParagraph'>
    Second Paragraph
</p>

CSS Code

body{
    background-color:#000;
}
p{
    font: normal 11px Arial, Helvetica, sans-serif;
    color: #fff;
}
#StrangeParagraph{
    opacity: 0.9;
}

Below, an Image to show the detailed issue...

(I know it appears ok, but some other words, in other idioms I have to work with, it begins to render a little blur, and difficult a little the readability.)

So, my question isn't exactly why... But how to solve this "ghost" rendering?

Details:
- Windows 7 Professional x64
- Windows ClearType Off
- Google Chrome Version 34.0.1847.116 (up to date)
- Video Card nVidea GeForce GT540

(Already tried with no success:
text-shadow
-webkit-font-smoothing
-webkit-text-stroke
font-weight
-webkit-backface-visibility
font-smooth (Chrome doesn't even accepted it))

Answer 1

First of all, I want to Thank the @Tschitsch. He's comment was a light in the darkness. So, thank you!

In the end, I still don't know if the other users don't witness or just don't notice the issue. Anyway, I wanna thank everybody that tried to help in anyway.

Now, to the Answer:

Making a little of observation, I noticed that it only happens when the text was inside a DIV that its opacity set to below 1 (100%). When the opacity is 1, the text is rendered perfectly clear (So, I assume it's not a normal thing. It's not like... This font is rendered this way in Chrome, there is nothing you can do). I also noticed that there was none problem in the text to be semi-transparent it self.

So, in conclusion, the problem was only the inheritance of the opacity property by the text from the div.

My solution was simply use the opacity directly in the colors of the elements, witch allow me to make the DIV semi-transparent, without set a opacity to the text (but You can use the rgba in the text too, without any issue).

To especifically solve the issue in the Bootstrap Tooltip Component (v 2.3.2) in Chrome, below is my code. It makes the Text be clear in Firefox 27, Chrome 34, IE 8 (I still don't believe in this last one hahaaaha)

Css Code

.tooltip.in {
    opacity: 1;
}

.tooltip-inner {
    color: #FFFFFF;
    background-color: rgba(0,0,0,0.8);
}

.tooltip.top .tooltip-arrow {
    border-top-color: rgba(0,0,0,0.8);
}

I really hope I could help anybody that across this issue too.

(Still don't understand why was down-voted...)