413469 - CSS background-color not painted for wide DIV when scrolling

Status: RESOLVED INVALID

(Core :: Web Painting, defect)

Description

[Duncan Loveday]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b3pre) Gecko/2008011704 Minefield/3.0b3pre
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b3pre) Gecko/2008011704 Minefield/3.0b3pre

Given a <DIV> that is too wide to fit the screen and has style="background-color:..." set, the background colour is not painted as the screen is horizontally scrolled to the right.

Reproducible: Always

Steps to Reproduce:
1. Open the attachment and scroll to the right
2.
3.
Actual Results:  
The portion of the div coming into view does not have the background colour set.

Expected Results:  
The portion of the div coming into view should have the background colour set.

Seems to be a long standing bug, same in FF 2.0.0.11

Comment 1

[Duncan Loveday]

Attachment: test case

Comment 2

[Duncan Loveday]

Attachment: test case with (and without) workaround

Attaching a file which both demonstrates the bug and provides what seems to be a usable workaround.

Comment 3

[Daniel.S]

I'm sorry to tell you this is no bug. The content of the div element overflows thus is rendered outside.

The div element inside the table expands to the width of the text because the table width calculation algorithm is different than the width calculation algorithm of usual block elements.

This is defined in CSS 2.1 and all latest browsers agree.

-> Invalid.

Comment 4

[Duncan Loveday]

Why's it rendering the text in light green foreground colour then ?

Comment 5

[Daniel.S]

Difficult to explain. color is inherited, background-color is not (it shines through).

This means: The rendered text is green as specified in an ancestor element. So even if the text is rendered outside the box (div) it is rendered green.

The div elements background-color only occupied the width and height of the element. The text's actual background-color is transparent.

You could write <div><span>Text</span></div> and give the span element a background color. This will render even outside the div box because it's directly associated with the text run.

Comment 6

[Duncan Loveday]

Got it. Inheritted attributes apply to all of the text, non-inheritted only to the portion inside the DIV.

Thanks for the info. No great surprise that IE 6 does this wrong !