559944 - Margin/padding background redraw breaks on scroll when parent has overflow:hidden

Status: NEW

(Core :: Web Painting, defect, P2)

Description

[Chris Jean]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

While doing some development, I found an odd issue where the background color over a padding or margin area would disappear on scroll. The behavior clearly shows a redraw calculation error. The link provided above shows this behavior clearly in 3.6.3; simply scroll the page up and down. This bug has been confirmed in 3.6.3 for Windows XP, Windows 7, OS X 10.6, and Ubuntu 10.04.

If you are unable to reproduce this behavior with your Firefox version, you can see the results on my tested systems in this video: http://new.gaarai.com/firefox-background-redraw-bug.ogv

The html sample http://new.gaarai.com/firefox-background-redraw-bug.html is boiled down to focus on the minimum necessary to show the issue. The only unneeded elements are the p tags to pad out the content and make the issue clear without creating a very small window.

The following will recreate this bug:

<div style="overflow:hidden;">
  <div style="padding:2em; background:#DDD;">
    Content
  </div>
</div>
<div> style="margin-top:100px;">
  Content
</div>

-- and --

<div style="overflow:hidden;">
  <div style="background:#DDD;">
    <div style="margin:2em;">
      Content
    </div>
  </div>
</div>
<div> style="margin-top:100px;">
  Content
</div>

The size of the margin or padding doesn't make a difference as long as it is greater than 0. The top margin on the second container needs to be big enough to be noticeable, but like the margin/padding, it can be any size (smaller top margins result in small rendering defects on the right side when the window is large and larger right side defects as the window width is shrunk down).

The type of background used does make a difference. Solid colors are affected by this bug, but images and gradients are not (I would assume that due to their complexity, they are always redrawn on scroll).

Adding a background to the overflow:hidden element or the body tag in the example causes the problem to go away; however, in my real-world code with this issue, only removing the overflow:hidden causes the problem to go away.

Enabling/disabling smooth scroll, using alt+scroll, and using the arrow keys to scoll had no effect on the issue on the bug. Forcing a redraw by moving the window, resizing the window, or selecting all the text causes the background to be redrawn properly.

Reproducible: Always

Steps to Reproduce:
1. Produce a set of HTML and CSS rules matching the setup I've described.
2. Scroll the page enough to expose the bottom of the element with the background set plus some of the element below it (the gap).
3. Scroll up and watch as the screen redraw "grabs" part of the gap background color and caries it into the affected element.
Actual Results:  
This can be seen in my example video: http://new.gaarai.com/firefox-background-redraw-bug.ogv

Expected Results:  
The solid color background should be redrawn properly on scroll.

Comment 1

[Nickolay_Ponomarev]

Attachment: testcase

Thanks for the simple testcase!

Comment 2

[Nickolay_Ponomarev]

I can reproduce on Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.3a5pre) Gecko/20100425 Minefield/3.7a5pre and couldn't find obvious duplicates.

I have no idea what component this should be in, though, let's try Layout.

Comment 3

[Timothy Nikkel (:tnikkel)]

Does this still happen?

Comment 4

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Appears to not be a bug on trunk.