478459 - Shadows are not displayed correctly for images with transparency (used by iWeb)

Status: RESOLVED INACTIVE

(Core :: Graphics: Canvas2D, defect)

Description

[Harry.Shamansky]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b2) Gecko/20081201 Firefox/3.1b2
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b2) Gecko/20081201 Firefox/3.1b2

I have images on my website that have a drop shadow behind them.  These are supported in Safari and IE, but there were completely unsupported with Firefox 3.  After trying Firefox 3.1 Beta 2, I noticed that it TRIED to place the shadow, but it placed it around the border of the PNG rather than ignoring the transparency as IE and Safari do.  

Reproducible: Always

Steps to Reproduce:
1. Go to any website with transparent PNG images with a dropshadow.  (shamansky.freehostia.com is one example)
Actual Results:  
Shadows are not rendered correctly.

Expected Results:  
Rendered the shadows to fit the image without transparency.

Comment 1

[Matthias Versen [:Matti]]

Please attach a screenshot of your expected and your result with Firefox.
I can't see a difference between SM 1.9.1 branch and Safari3.2

Comment 2

[Matthias Versen [:Matti]]

Attachment: Screenshot from Safari 3.2 via browsershots.org

Comment 3

[Matthias Versen [:Matti]]

Attachment: Seamonkey 1.9.1

Comment 4

[Harry.Shamansky]

You really can't see any difference?  Look at the ghostly box that Seamonkey displays around the images.  I can post very similar screenshots if you still don't see a difference.

Comment 5

[Harry.Shamansky]

Attachment: Ideal result - (from Safari)

This is my ideal result - The images have a shadow, but only around the actual image

Comment 6

[Harry.Shamansky]

Attachment: Firefox 3 - (No shadow whatsoever)

Comment 7

[Harry.Shamansky]

Attachment: Firefox 3.1 Beta 2 - Shadow Attempted, but box forms around icons

Comment 8

[Matthias Versen [:Matti]]

imagelib, Image: Painting or css ?

Comment 9

[philippe (part-time)]

(In reply to comment #8)
> imagelib, Image: Painting or css ?
The page uses the canvas element to display those boxes/images

Comment 12

[Dan Dickerman]

Attachment: shadowed element compared in Safari and FF3.5b4 (pre)

This screenshot compares rendering in current Safari and FF 3.5b4 (nightly pulled this morning, shadows appear the same in the alpha nightly as well, FWIW).  The Safari behavior is what I would expect, the shadow in FF conforms to the rectangle, rather than respecting transparency.  

This test page contains just this single image element, a PNG logo with transparency to the edges and a shadow specified with CSS, which I'm hoping will simplify isolating and testing the problem.  It can be found here...

http://www.easterbrookpainting.com/ShadowTest/logo.html

Comment 14

[Marcia Knous [:marcia]]

Confirming this bug and noting that this did work in Firefox 3, so it is a regression and we should try to hunt down the regression range. Also nominating.

Comment 16

[shawnstra]

I apologize for the duplicate. I was just searching "iWeb" as I thought the problem was isolated to iWeb sites only.

Comment 17

[Bill Gianopoulos [:WG9s]]

This occurs on current trunk and also under Windows and Linux.

Version -> Trunk
OS -> All

Comment 18

[Bill Gianopoulos [:WG9s]]

Not sure about the appropriateness of the "regression" keyword here.

Previously we did not do drop shadows at all.  Now that we do them, they are not done correctly in this case.

Drop shadows were never done correctly for this page as far as I know.

Comment 20

[Samuel Sidler (old account; do not CC)]

Not blocking 1.9.1.1, but we'll look at a baked patch for a future 1.9.1.x release.

Comment 21

[shawnstra]

with the release of 3.5.1, the problem is still unsolved

Comment 22

[Matthias Versen [:Matti]]

sure, as you can see at the bug status which is "NEW" and not "resolved fixed"

Comment 25

[Kenn Marks]

Attachment: Shadowed images in iWeb Still not rendering properly FF 3.5.5

Same problem with my son's website: http://mysite.verizon.net/marks.family/

Comment 26

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to comment #12)
> This test page contains just this single image element, a PNG logo with
> transparency to the edges and a shadow specified with CSS, which I'm hoping
> will simplify isolating and testing the problem.  It can be found here...
> 
> http://www.easterbrookpainting.com/ShadowTest/logo.html

Um, the shadow is part of a canvas.  Where's the script that draws to the canvas?  This testcase is far-from-simple.

Comment 27

[jlee]

My iWeb site is also having this problem: Shadows are not rendered properly for my website made with iWeb from iLife '08.  I have a star/asterisk shape with shadows.  In Safari, the shadows follow the outline of the shape; in Firefox, the shadow is a square box.  Also, I have a rounded rectangle with shadows. In Safari, the shadow follows the rounded edges of the rectangle, but in Firefox, the shadows follow a squared-edges rectangular shape.

On my computer, I have Firefox 3.5.2, using Snow Leopard.  I have seen this page rendered exactly the same way on a Windows machine using Firefox (not sure of version number).

The page: 
http://www.akada.us/Site/ESL_For_Career.html

Both of the aforementioned elements are at the top of the page.

Comment 32

[Peter Gadsby]

Attachment: Incorrect shadowing (works in IE9 and Chrome)

Comment 33

[Alice0775 White]

This was fixed by Bug 662898.

And WFM on 
http://hg.mozilla.org/releases/mozilla-beta/rev/ea7034005498
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0) Gecko/20100101 Firefox/6.0 ID:20110713171652

Comment 34

[Bas Schouten (:bas.schouten)]

Looking at http://www.akada.us/Site/ESL_For_Career.html I don't think the actual bug is fixed here? Or is this a different bug? The star on the right looks significantly different than in IE9. I don't think this is a canvas bug though?

What do you think, Roc?

Comment 35

[Zéfling]

Two image  examples (PNG and SVG) show a problem, because I think “box-shadow” is not a solution. This is not a “box” in this cases and must take account alpha layer, which is not done on a transparent div. Why a different behavior for an image? A new CSS feature is necessaries for a new type of shadow. 

http://ikilote.net/Programmation/CSS/Test/image.svg+box-shadow.htm
http://ikilote.net/Programmation/CSS/Test/image.png+box-shadow.htm

The sample result that some would like.

http://ikilote.net/Programmation/CSS/Test/image.svg+shadow.sample.htm

In the future, I think “transform-3D” will take problem for the shadows.

Comment 36

[Robert O'Callahan (:roc) (email my personal email if necessary)]

(In reply to Bas Schouten (:bas) from comment #34)
> Looking at http://www.akada.us/Site/ESL_For_Career.html I don't think the
> actual bug is fixed here? Or is this a different bug? The star on the right
> looks significantly different than in IE9. I don't think this is a canvas
> bug though?

I think this is a canvas bug. It looks like that page is drawing the image into a canvas with a shadow to produce the shadow effect. The spec says to use the alpha channel of the source image to generate the shadow, and we seem to not be doing that.

Comment 37

[Bas Schouten (:bas.schouten)]

Attachment: Testcase for canvas

Comment 38

[Bas Schouten (:bas.schouten)]

(In reply to Robert O'Callahan (:roc) (Mozilla Corporation) from comment #36)
> (In reply to Bas Schouten (:bas) from comment #34)
> > Looking at http://www.akada.us/Site/ESL_For_Career.html I don't think the
> > actual bug is fixed here? Or is this a different bug? The star on the right
> > looks significantly different than in IE9. I don't think this is a canvas
> > bug though?
> 
> I think this is a canvas bug. It looks like that page is drawing the image
> into a canvas with a shadow to produce the shadow effect. The spec says to
> use the alpha channel of the source image to generate the shadow, and we
> seem to not be doing that.

The page listed doesn't seem to draw into a canvas, does it? Also I added a little testcase to this bug showing us (as far as I can tell) correctly using the source image alpha channel for the shadow in canvas. Both with Azure and with Cairo.

Comment 39

[Robert O'Callahan (:roc) (email my personal email if necessary)]

(In reply to Bas Schouten (:bas) from comment #38)
> The page listed doesn't seem to draw into a canvas, does it?

It does.

Comment 40

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Your testcase seems to work, but the page still does not.

The canvas renders the shadow of the green star; the star itself is rendered as a separate IMG on top. You can see that the shadow does not track the alpha values of the star.

Comment 41

[Rob]

Attachment: Shows a png in firefox with an incorrectly drawn drop-shadow

from http://swingbuffalo.com/

Comment 42

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is relatively low, S3. However, the bug has 11 duplicates and 11 votes.
:lsalzman, could you consider increasing the bug severity?

For more information, please visit auto_nag documentation.