PNG images are not transparent until page is reloaded

RESOLVED INVALID

Status

()

RESOLVED INVALID
11 years ago
10 years ago

People

(Reporter: sagotsky, Unassigned)

Tracking

({regression})

Trunk
x86
All
regression
Points:
---
Bug Flags:
blocking1.9.1 -

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

11 years ago
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

11 years ago
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.
Confirm on vista using:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9pre) Gecko/2008050105 Minefield/3.0pre
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. 
Component: General → Image: Painting
OS: Windows XP → All
Product: Firefox → Core
QA Contact: general → image.gfx
Version: unspecified → 1.9.0 Branch
(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
Status: UNCONFIRMED → NEW
Ever confirmed: true
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.
Flags: blocking1.9.1?
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.
Moving over to Core: General; this could either be a script bug (related to loads and whatnot), or a style system bug.
Component: Image: Painting → General
QA Contact: image.gfx → general
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.
Blocks: 84582
Component: General → Style System (CSS)
Keywords: regression
QA Contact: general → style-system
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?
(Reporter)

Comment 10

10 years ago
I switched to onload.  It appears to have fixed the problem.  Much appreciated :)
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?
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.
we should get this off our radar though.
Status: NEW → RESOLVED
Last Resolved: 10 years ago
Resolution: --- → INVALID
Version: 1.9.0 Branch → Trunk
You need to log in before you can comment on or make changes to this bug.