My favorites | Sign in
Logo
             
New issue | Search
for
| Advanced search | Search tips
Issue 559: Cleartype text not rendered correctly with opacity applied
50 people starred this issue and may be notified of changes. Back to list
Status:  Fixed
Owner:  brettw@chromium.org
Closed:  Mar 2009
Cc:  karen@chromium.org
Type-Bug
Pri-2
OS-All
Area-WebKit
Mstone-2.0


Sign in to add a comment
 
Reported by leger.julien, Sep 03, 2008
Product Version      : 0.2.149.27
URLs (if applicable) : http://www.netvibes.com
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
     Safari 3: OK
    Firefox 3: OK
         IE 7: OK

What steps will reproduce the problem?
1. Go to http://www.netvibes.com
2. Look the links in the footer of the page

What is the expected result?

Links are displayed with good font and aspect. Just like in other browsers.

What happens instead?

They look ugly ;)

Please provide any additional information below. Attach a screenshot if 
possible.
 
chromebug.jpg
43.8 KB Download
Comment 1 by evan@chromium.org, Sep 03, 2008
(No comment was entered for this change.)
Summary: Font rendering wrong on netvibes
Status: Assigned
Owner: bre...@chromium.org
Labels: -Area-Unknown Area-Compat
Comment 2 by brettw@chromium.org, Sep 03, 2008
This happens when there is text with opacity applied, we don't get the cleartype 
edges correct. (Internal bug 1144145 which I'm duping on this.)

Note that this also affects images with alpha channels that additionally have an 
opacity applied to them. The cause is the same as for the cleartype problem, the 
image is composited onto our layer which has our magic transparency color applied to 
it. Although this color is replaced when we composite, the antialiased edges around 
any text or images will have been composited on the wrong color and will look bad.
Owner: ---
Comment 3 by brettw@chromium.org, Sep 03, 2008
(No comment was entered for this change.)
Summary: Cleartype text not rendered correctly with opacity applied
Status:
Comment 4 by apostolo...@gmail.com, Sep 04, 2008
[CONFIRMED]
Comment 5 by MadCatMk254, Sep 08, 2008
Very similar to http://code.google.com/p/chromium/issues/detail?id=559
Comment 6 by yarin.kaul, Sep 27, 2008
SourceForge is a prominent website where this problem occurs:
http://sourceforge.net/projects/wtl (have a look at the green download button)

Attached: Simplified test case.
opacity-test.html
459 bytes Download
Comment 7 by yarin.kaul, Sep 27, 2008
Note that this problem does not occur if half-transparent black text is rendered on 
white background.

Attached: Modified testcase where the problem does not occur.
opacity-test-2.html
455 bytes Download
Comment 8 by ttup...@ineedaprayer.org, Nov 07, 2008
Please note that the PNG opacity problem occurs when opacity of the bounding object is changed.  That is, 
when opacity of a bounding object (such as a DIV) is less than 100%, any PNG rendered in that bounding 
object will be rendered incorrectly.  This is very bad for any kind of procedural image manipulation, including 
opacity effects.  One cannot fade objects containing PNG images in and out by varying the opacity, for 
example, if the PNG images have any transparency to them, as Chrome will not render those images properly.  
This is a very serious rendering issue for Chrome that is not demonstrated by any other major browser.  The 
primary statement above included the following statement:

"Although this color is replaced when we composite, the antialiased edges around any text or images will have 
been composited on the wrong color and will look bad."

Actually any pixel that is at less than 100% opacity in the PNG image itself appears to get drawn in your magic 
color AND at 100% opacity until the containing object has a CSS opacity of 100%.  Verify this for yourself:

1) Create a PNG image with a transparent region... something like a round button with a gradient drop 
shadow on a transparent BG.  Save this as a PNG24.

2) Place the button into a DIV on a page, or apply it as a CSS background property.

3) Under script control, vary the opacity of the containing DIV.

You will observe that the transparent areas of the PNG will render in your magic color, at 100% opacity, until 
the opacity of the containing object reaches 100%.  At this point, the PNG will render properly.

Frankly speaking, I do not believe this problem is likely to be just one of your compositing engine failing to 
deal with anti-aliased edges properly.  

I'd be happy to set you up with specific test cases if that will help.
Comment 9 by igitur, Nov 08, 2008
Is this bug the same as https://bugs.webkit.org/show_bug.cgi?id=18875 ?
Comment 10 by aocampo@chromium.org, Nov 21, 2008
 Issue 4441  has been merged into this issue.
Comment 11 by goorol2, Nov 25, 2008
Another simplified test case (from  Issue 4441 )
http://pc44.one.pl/goorol/bugs/chrome_001.htm
Comment 12 by chris.othermedia, Dec 11, 2008
I have just entered a similar report to the outstanding issue [2791 in chromium: 
semitransparent .png files is not  shown correctly], it should probably be merged 
with this one. In addition the issue [ Issue 128 : Rounded corners with -webkit-border-
radius with a drop shadow renders as black] is probably also related, and should 
therefore be merged to raise the chances of this getting fix before 1.0.
Comment 13 by dandin1sb, Jan 05, 2009
As an alternative to the description of the bug, here's a zoomed screenshot of the 
problem which anyone who has ever exported a transparent GIF will instantly 
recognize:
chromium-opacity-bug.png
969 bytes Download
Comment 14 by aocampo@chromium.org, Jan 12, 2009
 Issue 6267  has been merged into this issue.
Comment 15 by brettw@chromium.org, Jan 13, 2009
 Issue 251  has been merged into this issue.
Comment 16 by jon@chromium.org, Jan 14, 2009
(No comment was entered for this change.)
Status: Assigned
Owner: bre...@chromium.org
Labels: -Area-Compat Area-WebKit Mstone-2.0
Comment 17 by brettw@chromium.org, Feb 18, 2009
(No comment was entered for this change.)
Status: Started
Comment 18 by brettw@chromium.org, Mar 03, 2009
Should be fixed in r10637.
Status: Fixed
Comment 19 by dandin1sb, Mar 03, 2009
Seems so, I just tried the snapshot. thanks!
Comment 20 by ttup...@ineedaprayer.org, Mar 03, 2009
Yes - this is lovely.  Fantastic work!
Comment 21 by aocampo@chromium.org, Mar 03, 2009
 Issue 8075  has been merged into this issue.
Sign in to add a comment