Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts

    Question css background image flickers

    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?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.


    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    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/
    Last edited by angst; 05-19-2009 at 03:17 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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/flicke...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.
    Attached Images Attached Images  
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    yah, this is odd, it happens on all browsers that i've tested so far.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I don't see any such flickering issues.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    what browser are you using?

    I've checked on FF & IE

  • #8
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    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:


    Okay, that's really hard to see, but if you click on it, you'll see that it's a 3 pixel high image.
    Last edited by Fisher; 05-19-2009 at 05:42 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •