alpha png in FF giving problems

[ThomasJSmart]

Having a strange problem with Firefox and wondering if anyone else has come across this and if there is a solution.

I have a site with a body background image, over that various design elements. structure is mostly done with divs.

one element is a div with an semitransparent alpha PNG image, giving a part of the page a semi transparent coloured area.

this is all working great, the problem comes when i animate the transparent layer and make it move, it seems to be moving realy jittery, with parts of the background image being repeated and getting stuck, and graphical artifacts all over the place. When the div completed its animation it goes normal again, the artifacts disapear and it all looks great untill the next animation.

this problem is only happening in Firefox on a windows XP and vista system, safari and Firefox on apple works fine, IE6 and 7 on windows works fine too.



I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[BillyRayPreachersSon]

Can you post a URL?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[ThomasJSmart]

i cant post it, but i can mail or pm it to you (if this forum supports pm?)


I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[BillyRayPreachersSon]

This forum is about sharing - whether knowledge or ideas. No can do on the PM front.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[BillyRayPreachersSon]

P.S. If you can PM it to me, then surely you can post it here... or did you mean 'wont' instead of 'cant'?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[ThomasJSmart]

its a matter of a confidentialty agreement with the client as the site isnt released yet, it would be one thing to ask 1 or 2 persons to have a look at it for advise but quite another to post the link on a public forum (especially with the speed tektips is indexed by google

Site is being released this weekend though so i will post the link here after this weekend. Target audience are not realy FF users so shouldnt be a problem.



I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[Foamcow]

Can you not just replicate the problem with a test page?
It sounds like a processing issue that you won't have much luck in fixing and you may need to file a bug report.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[ThomasJSmart]

ok this is interesting, iv made a very simple test page and it does not show the same effect, so im guessing it has to do with the different divs and containers im using, will change the test page into the complex version step by step and see when it starts to break again....

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[ThomasJSmart]

Hi

the site has gone live so i can post the link

http://www.opvoedpoli.nl/

(ps has anyone else noticed that this forum doesnt work in IE7, i cant post, just get an empty screen)

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[AGus01]

Hi,

I like the look of your site!

I noticed that your doctype tag is rendering the page in all browsers in quirks mode.

I would suggest that you try changing the Doctype tag to one which renders the page in Standards compliant mode first. Then revalidate the css and html and see if there are any issues.

For example the following will render in Standard Compliant mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "

http://www.w3.org/TR/html4/strict.dtd">

For further information on doctype tags go here:

http://hsivonen.iki.fi/doctype/

 

[ThomasJSmart]

hi, thanks, im very pleased with the look of this one

currently its running in this document type because its still on version 5 of my cms, in january my v6 will be done which is all xhtml 1 strict, untill then it has to run with this document type...

i dont think that is the cause of the FF problems though.. as i said it works fine in FF for the apple.


I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[BabyJeffy]

Works smoothly in Safari on a Mac as well.

I have a suggestion... Could you fade up the background image (rather that flip it in suddenly)? Maybe even a 500ms cross fade would make it less "flickery". Maybe attach an onload to the image itself, so you can fade it up when it's fully loaded.

Nice effects use, regardless!

Cheers,
Jeff

[tt]Visit my blog [!]@[/!]

http://www.coderambler.com/

Visit Code Couch [!]@[/!]

http://www.codecouch.com/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[ThomasJSmart]

yea a fade would make it look much better, but how to fade a body.style.backgroundImage ??

the images are preloaded...

var PLimg2 = new Image(); PLimg2.src='img/background_2.jpg'; 

document.body.style.backgroundImage = 'url('+PLimg2.src+')';

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!