431694 - PNG images are not transparent until page is reloaded

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Jon]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b5) Gecko/2008032620 Firefox/3.0b5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b5) Gecko/2008032620 Firefox/3.0b5

I have a page that uses a transparent png graphic for each navigation link.  The background color of the li containing the link changes gradually when hovered over.

In firefox3 on windows and ubuntu hardy, the color behind the pngs appears to be white.  I think they aren't being rendered transparently.  After clicking one of the links the next page that loads will show them transparently as intended

Reproducible: Always

Steps to Reproduce:
1. Visit http://biosystems.mit.edu/index.php
2. Hover mouse over navigation links (home people projects publications etc.)
3. Notice that the color of the images does not change.
4. Click one of the links or reload.
5. Now hovering over them changes their color.
Actual Results:  
During step 3 the colors did not change implying that there was no png transparency.  There was however transparency during step 5.

Expected Results:  
I expected the pngs to be transparent throughout.

I've seen this problem on several machines.  Two ubuntu hardy boxes, one is an amd64 the other is a pentium 4.  The windows box is running in vmware on a quad xeon.

This may be related to https://bugzilla.mozilla.org/show_bug.cgi?id=428045 but it seemed different enough that I felt another bug was warranted.

Comment 1

[Dave Garrett]

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9pre) Gecko/2008050104 Minefield/3.0pre

I'm not seeing this exactly, but I am getting inconsistent behavior.  On first load or a refresh "home" is grey, and then hovering over other ones changes them grey too.  The button colors don't go away.  If I then click on "home" it refreshes the same page, but now the "home" button is green and hovering over other buttons gives a green effect which does go away after hover.  This works like this (which, I'm assuming is as intended) for each button I click on, but at any point if I refresh the page it goes back to the grey.

Comment 2

[Nochum Sossonko [:Natch]]

Confirm on vista using:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9pre) Gecko/2008050105 Minefield/3.0pre

Comment 3

[Ria Klaassen (not reading all bugmail)]

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9pre) Gecko/2008050210 Minefield/3.0pre

This appears to WFM. The buttons get gray on mouseover. 

Comment 4

[Nochum Sossonko [:Natch]]

(In reply to comment #3)
> Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9pre) Gecko/2008050210
> Minefield/3.0pre
> 
> This appears to WFM. The buttons get gray on mouseover. 

That is precisely the problem, the bg image should be green on hover, then revert to black, this is what it does in IE, and what it does after reloading the page.

Confirming.

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.2a1pre) Gecko/20081218 Minefield/3.2a1pre

and

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

Comment 5

[Nochum Sossonko [:Natch]]

requesting blocking-1.9.1 to get this looked into. Note: this is not a profile issue as the bug exists in 3.0 as well as current 3.1/3.2alpha.

Comment 6

[Vladimir Vukicevic [:vlad] [:vladv] (needinfo me, slow to respond)]

So when I shift reload and hover over, say, 'projects', I get this as the anchor element on inspection:

<a href="projects.php" class="buttons" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">projects</a>

if I hit the home button, then when I hover I get:

<a href="projects.php" class="buttons" style="color: rgb(0, 0, 0); background-color: rgb(85, 153, 34);">projects</a>

so the transparency is working, it just looks like the wrong background color is being set somewhere.

Comment 7

[Vladimir Vukicevic [:vlad] [:vladv] (needinfo me, slow to respond)]

Moving over to Core: General; this could either be a script bug (related to loads and whatnot), or a style system bug.

Comment 8

[Ria Klaassen (not reading all bugmail)]

Ok, they should indeed have looked cool emerald green, I see now :).
This regressed on 20 Apr 2007.
http://bonsai.mozilla.org/cvsquery.cgi?module=PhoenixTinderbox&date=explicit&mindate=2007-04-20+12%3A00&maxdate=2007-04-20+17%3A00
So from Bug 84582 I think.

Comment 9

[Boris Zbarsky [:bzbarsky]]

Looks like this site uses JQuery's ready() method.  Doesn't that run when DOMContentLoaded fires?  That can now fire before all stylesheets are loaded.  If so, should the script be using onload instead, if it wants to run once all external resources are loaded?

Comment 10

[Jon]

I switched to onload.  It appears to have fixed the problem.  Much appreciated :)

Comment 11

[Boris Zbarsky [:bzbarsky]]

I'm tempted to mark this invalid or wontfix, since the behavior is exactly as expected given what the script is doing.  David, any thoughts?

Comment 12

[Vladimir Vukicevic [:vlad] [:vladv] (needinfo me, slow to respond)]

Yeah, that sounds fine to me -- might want to ping jresig as well, so that he can update jquery docs and explicitly call out that problem.

Comment 13

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

we should get this off our radar though.