1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Fixed Background causes Scroll Lag ?

Discussion in 'CSS' started by Virendar, Jan 1, 2010.

  1. #1
    I have tested the following on firefox only, I would like to request someone check on IE for me.

    I have a website with a fixed background image, and a background color behind that, if that makes sense.
    Here is an example, my News page : http://animefushigi.com/news

    As you can see, if you scroll up or down with your mouse or even by sliding the scroll bar, there is no lag (at least I hope not).

    Now, if you hold CTRL and scroll up or down a little with your mouse wheel, you can zoom in or out. After doing this, if you scroll on my website, it gets super choppy. I wonder why this happens ? I know that many people (including me) have accidently zoomed in/out without knowing it....so many of my visitors may be experiencing scrolll lag.

    Now, look at this website... http://www.aionsource.com/forum/

    I can zoom as much as I want and I never get scroll lag ! What difference do they have in thier code ?

    My css for the bacground is as followed :
    
    body.yoopage { background: #365171 50% 0 no-repeat; }
    #page-body { background: url(../../images/variations/blue/page_bg_img.jpg) 50% 20px no-repeat fixed; }
    
    Code (markup):
    Any help ?
     
    Virendar, Jan 1, 2010 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Of course it does - because every element on the page has to be re-drawn to for the transparency to that background (if any). A normal scroll where everything is moved can simply be blitted from the existing render... position:fixed requires a total redraw of every frame - you might as well be refreshing the page from a local file on every frame drawn for scrolling.

    Which is why you rarely if ever see websites that use fixed backgrounds except for a handful of really crappy myspace pages. It's an effect that is completely impractical to implement on a page.
     
    deathshadow, Jan 1, 2010 IP
  3. Virendar

    Virendar Peon

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Can someone then explain why the aiosource forum doesnt experience this lag ?

    Read the later half of my original post
     
    Virendar, Jan 1, 2010 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    I experience lag on that second site on my laptop, but not my desktop, though nowhere as pronounced as the first site. Why is the second one less effected than the first?

    ALPHA TRANSPARENCY! The AION Source site does not have alpha transparency to it's background. It generally takes ten to fifteen times longer to re-draw a transparent element over a background than it does a non-transparent one. Kill the alpha transparency on anime-fushigi and it will be LESS problematic...

    Note I said less. Fixed background is still made of /FAIL/ and shouldn't be used on BODY.
     
    deathshadow, Jan 2, 2010 IP