...

View Full Version : css background image flickers



angst
05-19-2009, 02:12 PM
Hello,
I'm having a strange issue where my background pattern flickers when scrolling the page. example: http://www.remixwars.com/temp/

is there anyway to fix this?

Excavator
05-19-2009, 03:02 PM
Hello angst,
I didn't try it but I would imagine a well formed document would perform better than your incomplete code. Run that through the validator and fix the errors, then see what it does.

Links about validating in my sig below.


...

angst
05-19-2009, 03:07 PM
I've tried this in a complete doc with the exact same result, I just put this together really quick as an example for ppl to view.




edit: there we go, 100% valid according to your links, and still the exact same thing: http://www.remixwars.com/temp/

Excavator
05-19-2009, 03:46 PM
Just as quick to make a valid presentation. Especially since that's the first thing anyone on this forum is going to suggest.

Seems like a known IE bug? http://tetlaw.id.au/view/blog/flickering-css-background-images-in-ie6/
The suggested fix is increasing the size of your background image to 50px square. When you increase the size of your bg.jpg you can see it's got shaded corners so you can't really tell if the larger image fixes the flicker.

I replaced your image with a solid color image for testing and you there doesn't seem to be a difference between a 2px square or 50px square.

Then I made this in PS using your 2px bg.jpg ... but it still flickers.

angst
05-19-2009, 04:43 PM
yah, this is odd, it happens on all browsers that i've tested so far.

abduraooft
05-19-2009, 04:56 PM
I don't see any such flickering issues.

angst
05-19-2009, 04:58 PM
what browser are you using?

I've checked on FF & IE

Fisher
05-19-2009, 05:38 PM
I see it in FF3 and IE6. This may not be entirely correct, but I believe it's because of the style of your background.

A scroll is 3 pixels high, so what is happening is that when you scroll the page, you're swapping the black with the orange pixels.

Change it so that it is uniform every 3 pixels.

Like this for example:
http://img242.imageshack.us/img242/4407/bg2k.gif

Okay, that's really hard to see, but if you click on it, you'll see that it's a 3 pixel high image.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum