[webkit-dev] White PNG image with alpha problem

[Mike Fischer]

Hi Mitz,


Am 05.11.2006 um 09:00 schrieb Mitz Pettel:

> Hi Mike,
>
> I believe this is http://bugs.webkit.org/show_bug.cgi?id=3438 —  
> incorrect display of transparent 1x1 PNGs.

Indeed, that looks like a hit. Thanks!


> Other than using canvas, you can specify a background color with  
> alpha for the div, for example, style="background: rgba(255, 255,  
> 255, 0.6)", use an opaque fill and the opacity property, or use a  
> PNG with bigger dimensions.

Hmm, good ideas. I'll have to check cross browser compatibility  
though. (There are hacks for CANVAS in IE and transparent PNG in IE  
5.5 to pre 7.0 which I'm evaluating right now. But I don't know about  
transparent colors in CSS. In Firefox 2.0 the CSS rgba color  
specification does not seem to work so I guess that method is out.)

The bigger PNG (1x2 Pixels) does indeed work in the released Safari.  
And it's only one byte larger on disk than the 1 Pixel version. So  
that is definitly a good workaround. I'd never have expected the  
dimensions of an image to change the color interpretation 8-)


Thanks!
Mike

>
> Cheers,
> -- Mitz Pettel
>
> On Nov 5, 2006, at 9:40 AM, Mike Fischer wrote:
>
>> Sorry, I forgot to add a subject!
>>
>>
>> Am 05.11.2006 um 08:35 schrieb Mike Fischer:
>>
>>> Hi!
>>>
>>> I am seeing a strange problem with transparent PNG files in the  
>>> release version of Safari/WebKit on Max OS X 10.4.8 PPC:
>>>
>>> I created a 1 pixel PNG image with color white and an alpha value  
>>> of approx. 60%.
>>>
>>> When I display this in an IMG tag (or as a CSS background image)  
>>> over other content the other content does not appear lighter as  
>>> expected but more gray (not really darker).
>>>
>>> When I use a CANVAS element to draw a white fill color with 60%  
>>> alpha the background is lightened as expected.
>>>
>>> The current nightly build does not show this problem. By  
>>> searching for bugs related to PNG on <http://bugs.webkit.org> I  
>>> couldn't find anything relevant. Also Firefox 1.5.0.7+, Opera  
>>> 9.02 and OmniWeb 5.5.1 show the expected color effect, i.e.  
>>> lightening the background.
>>>
>>> OTOH using a 1 pixel PNG with color black and an alpha of 50%  
>>> works exactly as expected, i.e. darkening the background for a  
>>> shadow effect.
>>>
>>>
>>> My questions:
>>>
>>> a) Was there a bug in WebKit causing this that got fixed for the  
>>> current nightlies? Or is this some unintended side effect and I  
>>> need to file a new bug to ensure that this stays fixed in the  
>>> future?
>>>
>>> b) Is there a workaround for the released version of WebKit  
>>> (419.3)? (Other than using a CANVAS element ;-)
>>>
>>>
>>> A test page demonstrating the effect is here (the top transparent  
>>> area shows the problem):
>>> <http://home.fi-works.de/test/test-png-alpha.html>
>>> Note that the testing area is built using JavaScript DOM methods  
>>> in this example. It essentially builds three layers: At the  
>>> bottom some text is created. Then (DIV id:"bgc1" z.index:1) some  
>>> color areas are created and in the top layer (DIV id:"bgc2" z- 
>>> index:2) the transparent testing areas are created.
>>>
>>>
>>> Thanks!
>>> Mike
>>> -- 
>>> Mike Fischer         Softwareentwicklung, EDV-Beratung
>>>                                     Schulung, Vertrieb
>>> Web: <http://homepage.mac.com/mike_fischer/index.html>
>>>
>>
>> -- 
>> Mike Fischer         Softwareentwicklung, EDV-Beratung
>>                                     Schulung, Vertrieb
>> Web: <http://homepage.mac.com/mike_fischer/index.html>
>>
>> _______________________________________________
>> webkit-dev mailing list
>> webkit-dev at opendarwin.org
>> http://www.opendarwin.org/mailman/listinfo/webkit-dev
>

-- 
Mike Fischer     Softwareentwicklung, EDV-Beratung
                                 Schulung, Vertrieb
Address: Bundesstrasse 9, D-20146 Hamburg, Germany
Phone: +49 (0)40/45038886, Fax: +49 (0)40/45038887