[webkit-dev] White PNG image with alpha problem

[Mitz Pettel]

Hi Mike,

I believe this is http://bugs.webkit.org/show_bug.cgi?id=3438 —  
incorrect display of transparent 1x1 PNGs. 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.

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