[webkit-dev] White PNG image with alpha problem
mf_software at mac.com
Sun Nov 5 00:51:12 PST 2006
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-)
> -- 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:
>>> 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 18.104.22.168+, 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
>>> 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):
>>> 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.
>>> 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
Mike Fischer Softwareentwicklung, EDV-Beratung
Address: Bundesstrasse 9, D-20146 Hamburg, Germany
Phone: +49 (0)40/45038886, Fax: +49 (0)40/45038887
More information about the webkit-dev