Fixed Background Attachment in TD Scroll Bug

bogey2014 · Post by **bogey2014** » October 11th, 2014, 4:58 pm

Hey Guys,

I'm running into a problem that only occurs on Firefox. I have a table that is taking 100% width and 100% height of the body element. I have a table row which contains 3 columns.

In the first and last column of the table, I have set a background image to be fixed. However, when the table grows enough to create scrollbars on the document, when you scroll up or down, Firefox redraws the fixed background image all weird. It gets messed up real quick and looks terrible.

Please see this JS Fiddle to see what I'm talking about:

http://jsfiddle.net/b3pfzt94/

To see the issue, scroll in the content area of the bottom right corner. Notice how the background images get all messed up? Resize the entire browser window without using the scroll, and the images get fixed.

Check the same fiddle in another browser such as Internet Explorer, and you will see it working correctly there without anomalies. Anyone know why this is happening? Is this a bug, or am I making some kind of mistake in my css?

This issue is similar to the one I found here:

https://stackoverflow.com/questions/209 ... in-firefox

Is this a bug that should be reported to Mozilla?

Post by **DanRaisch** » October 11th, 2014, 5:01 pm

Moving to Web Development.

Dom1953 · Post by **Dom1953** » October 13th, 2014, 1:23 pm

It certainly looks like a bug. Seems as if Gecko is intermittently updating parts of the screen during scroll, but not on final mouseup on the scroll bars. Under windows, blurring the FF window with Alt+Tab requests a screen update which causes the FF screen to be redrawn correctly - resizing is not specifically required. Bugzilla.mozilla is showing multiple bugs concerning fixed background issues but didn't find one matching this case, so report it by all means.

In the meantime using CSS to create the page layout without using a table can convince FF to scroll nicely. It is also the preferred method by many. If it helps with ideas you are welcome to the code below which I used in testing.

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>No table layout</title>
<meta charset="utf-8">
<style type="text/css">

BODY
{   background-color: white;
   margin:0px;
   min-height:100vh; /* if needed */
   font-size: 16px; font-family: 'arial';
}
DIV#mainLeft
{   position: fixed; top:0; left:0;
    height: 100%; width:20%;
   background-image: url('space-wallpapers-13.jpg');
   background-repeat: no-repeat;
   background-position: 0% 0%;
   background-size: cover;
}
DIV#mainRight
{   position:fixed;   top:0; right:0;
   height:100%; width:20%;
   background-image: url('space-wallpapers-1.jpg');
   background-repeat: no-repeat;
   background-position: 0% 0%;
   background-size: cover;
}
DIV#mainMiddle
{   width: 60%; margin-left: auto; margin-right:auto;
}
DIV#content   /* for example */
{   margin: 5px;
}

p.spacer{padding-top: 1000px; padding-bottom: 1000px;}

</style>

</head>
<body>
   <div id="mainLeft"></div>
   <div id="mainMiddle">
      <div id="content">
         Top line of div#content.
         <p class="spacer">ROFLCOPTER</p>
      </div>
   </div>
   <div id="mainRight"></div>
</body>
</html>

Fixed Background Attachment in TD Scroll Bug

Fixed Background Attachment in TD Scroll Bug

Re: Fixed Background Attachment in TD Scroll Bug

Re: Fixed Background Attachment in TD Scroll Bug