273648 - nest DIV with VERTICAL OVERFLOW, BACKGROUND-COLOR changes in the scrollable div from its preset color to parent-div's BACKGROUND-COLOR when scrolling BELOW what is initially rendered/visible in the scrollable div

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Steve]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0


If You loog at the page

http://www.bitfusion.com/BitFusion.asp?bitfusion_showproducts=1

In the scrollable div the background color is set to RGB 5,41,111 (a dark blue)
... Notice the Outer div (the background color of the rest of the page is RGB
7,53,127 (a lighter blue). Begin to scroll down in the scrollable div. Notice
that the background color in this scrollable div (in the area just below what
was INITIALLY VISIBLE) now changes to the parent DIV's background color of RGB
7,53,127 (the lighter blue). 

Thus, the unseen area in a scrollable div is set to the wrong background color,
and only becomes apparent you scroll down.


Reproducible: Always
Steps to Reproduce:
1. Load the URL http://www.bitfusion.com/BitFusion.asp?bitfusion_showproducts=1
2. Scroll the only scrollable div on the page just partially down and stop
3. Notice the change in background color mid scroll.

Actual Results:  
Background color changes midway-down from RGB 5,41,111 (what it was set to) to
what its parent is set to, RGB 7,53,127.

Expected Results:  
Background color should be the same throughout the scrollable div, RGB 5,41,111

Default Theme.

Comment 1

[Boris Zbarsky [:bzbarsky]]

The darker background is set on the <div class="menubar">.  This has a height of
"100%", which means it should be as tall as its parent (<div id="foofoo">, which
is 259px tall in this case).  The kids of menubar are taller than 259px, so they
overflow it, and the background painted below them is whatever the background is
for the nearest ancestor of menubar with a background, which is the lighter
background.

So the rendering is correct given the CSS on the page.  Just removing the height
style on menubar will help.