2

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...

Photoshop Example
(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))

Vitox
  • 3,852
  • 29
  • 30
  • Looks just fine to me on Chrome. – Abhitalks Apr 17 '14 at 06:41
  • 2
    Font smoothing issue? Try hints from [here](http://stackoverflow.com/questions/10538570/is-it-possible-to-disable-font-smoothing-in-css). And I see no smoothing in Chrome as well. – PTwr Apr 17 '14 at 06:41
  • Looks same on both browsers here. I see what you are saying with your images but I couldn't reproduce anything like that here. – Fr0zenFyr Apr 17 '14 at 06:44
  • Thanks for the hints, but tried here and nothing yet... Maybe it's something about the way our Chromes are rendering (hardware acceleration, don't know) – Vitox Apr 17 '14 at 06:53
  • @Vitox how do you get the images in your question? by using the zoom function of the browser? if so Google Chrome latest version renders it OK (as like as Opera renders). – King King Apr 17 '14 at 06:54
  • @KingKing No zoomed in browser. To reproduce exactly what browser is rendering in small font, I taken a print screen, and zoomed in Photoshop. So, that you see is exactly the same pixels in the screen. – Vitox Apr 17 '14 at 07:00
  • 2
    have you tried `color: rgba(255,255,255,0.9)` ? – Tschitsch Apr 17 '14 at 07:03
  • Looks like your machine issue then, try running (and check updates) browser in default settings (to check if it is system or browser fault). There are dozens of graphic settings in chrome://flags/, some directly interacting with fonts, so issue might be hidden there. Aside of updating browser, what OS are you testing it under? (No creepy shadow on newest chrome on 8.1) – PTwr Apr 17 '14 at 07:04
  • @Vitox I have a feeling that this is not a really serious problem. Why do you care much about that? With your eyes you can't see any difference between browsers. – King King Apr 17 '14 at 07:05
  • @KingKing I care because some words are rendered very bad. Take a look at the new image... It's really strange how the Bootstrap Tooltip looks. – Vitox Apr 17 '14 at 07:27
  • @PTwr Browser up to date, and Reset all configuration to Default. – Vitox Apr 17 '14 at 07:31
  • @Vitox yes, I can see a little blur around the letters rendered by Chrome **but** the letters rendered by FireFox have their own bad appearance, in other words, they are both **ugly**, FireFox is ugly in its own way and Chrome is ugly in another way. – King King Apr 17 '14 at 07:31
  • @KingKing Agree with you, but the ugliness of Chrome, make words like limit, appear like ||M|| – Vitox Apr 17 '14 at 07:34
  • @Vitox It appears you picked font smoothing/anti-aliasing as your windmill today. Each rendering engine (combination of browser and system) may do in different manner, and so font files can differ between systems. You won't find perfect solution, instead you might try silly work-around - change font to bitmap-based instead of "smart" outline ones, although some browsers/systems might try to force anti-aliasing on them, it should be possible to disable it as. Check [this](http://daringfireball.net/2003/03/antiantialiasing) article, it is for Mac but it pretty much covers everything. – PTwr Apr 17 '14 at 08:05
  • @PTwr and KingKing, You both appear to don't care about the perfection, and I agree that this is not a big deal at all. But I care about perfection. In the physical world, perfection is an utopia, but in the virtual world We have the opportunity to create it (and the perfection is my pursuit as programmer, always It's possible because time question). Anyway, Against your opinions and foreknowledge I reached the perfection in this particular case (I know this is small, but it still make me happy), without any silly work-around. – Vitox Apr 18 '14 at 10:51
  • @Tschitsch, don't replied You earlier, because I was testing your answer, and THANK YOU, THIS WAS THE LIGHT IN THE DARKNESS! I used the principle of rgba, and it worked with some modification... I'll thank you in my self-answare. – Vitox Apr 18 '14 at 10:54

1 Answers1

2

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...)

Vitox
  • 3,852
  • 29
  • 30