249444 - body background-position uses viewport width not container block width when background-attachment is scroll

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Duncan]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8a2) Gecko/20040630
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8a2) Gecko/20040630

Mozilla seems to think horizontal positioning of a body element's background
calculated as an offset from the left side of a rectangle which is as wide as
the viewport, but has the origin of the rendered content.  This means the
background is rendered in the wrong place when background-attachment is "scroll"
and background-position is not "left" (or "0%").

Horizontal behaviour is not a 90-degree rotation of the vertical behaviour.

See text of testcase webpage for more detailed description and demonstration.

It used to work as expected, but broke during the 1.7 series, probably while
fixing bug #235768.

Reproducible: Always
Steps to Reproduce:
1. Ask for a body with "background-attachment: scroll;" and background-position
not "left" (most obvious when it's "right") - this is X% where X != 0.
2. Look at it.  Carefully.

Actual Results:  
Background is positioned at (X% of the width of the *window*) from the left edge
of the page.

Expected Results:  
Background should be positioned at (X% of the width of the *page*) from the left
edge of the page.

Comment 1

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

I don't see any bugs here.  If you think there's a bug, could you clearly
explain the difference between Mozilla's behavior and the behavior you expect? 
Or is the URL http://www.duncangibb.com/mozbugs/ not the correct testcase for
this bug?  If so, what is?

Also, the text in the testcase webpage has a bunch of errors.  It doesn't matter
what your *opinion* of what the containing block of the BODY element is when the
CSS2.1 spec clearly says it's something else (the HTML element's box) in section
10.1.

Comment 2

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

And, FWIW, I don't know what you mean by distinguishing the width of the window
and the width of the page.  How are they different?  Are you referring to the
width of the vertical scrollbar or to the gap between the right edge of the text
and the scrollbar?

(In other words, when I ask you to clearly describe the difference, please
describe it without reference to concepts that aren't clearly defined.  i.e.,
say that the background should be adjacent to the scrollbar or that it should be
even with the edge of the text.)

Comment 3

[Duncan]

The link given is the correct test case.  Sorry if it's rambling and uses
unclear terms; I'm doing my best.

I did read the CSS spec before I started, I realise it permits the initial
containing block to be viewport-dependent.  I also realise that my opinion may
not carry any weight.

I would expect "background-position: right" to work as a 90-degree
anti-clockwise rotation of "background-position: bottom".  So I think the
background should be even with the edge of the text.

What actually happens is that the horizontal position is calculated with
reference to the width of the viewport, whereas the vertical position is
calculated with reference to the height of the whole page.  This is inconsistent.

When I talk about the width of the window, I mean the viewport - the rectangle
actually drawn when the browser window is unobscured.

When I talk about the width of the page, I mean the width of the rectangle
containing everything which could be drawn - the bitmap around which you can scroll.

Give me two minutes and I'll attach a screenshot of the behaviour I think should
be impossible.

Comment 4

[Duncan]

Attachment: Screenshot of behaviour which seems wrong.

The coloured stripes are declared "background-attachment: scroll", so they stay
in the same position relative to the text.  But they are supposed to be
"background-position: right".  I think this should place them even with the
right edge of the text.  In this example, they are viewport_width pixels from
the left edge of the text.  This is not the right side of anything.

Comment 5

[Duncan]

Further to your comment about my opinion vs the CSS spec, I think we agree that
the relevant dimension is the width of the root element container block.  CSS
2.1 section 10.1.1 explicitly says this is "chosen by the user agent", so
Mozilla can do whatever it wants without fear of breaking CSS 2.1 compliance.

I had a hunt around the drafts of CSS3 to see if this has been cleared up, but
the best I found is http://www.w3.org/TR/2002/WD-css3-box-20021024/#root-box,
which says "The root element of the source document generates the root box.",
but doesn't say *how*.  I think what I'm asking for is more likely to be what
CSS3 intends, but I'm biased - and it is only a draft.

I looked at my test case in a couple of proprietary browsers (the Norwegian one
and the broken one).  They seem to agree that:

  root_box_width = MAX( viewport_width, min_width_to_display_all_content)

whereas Mozilla seems to consider only the viewport width.  This can lead to a
situation in which the placement of a background, whether considered relative to
 the position of document content elements or relative to the viewport, depends
on contingent things like the width of the viewport and the position of the
horizontal scroll bar.

Would I make more sense if I said "the horizontal position should be X% across
the used canvas"?

Comment 6

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

The CSS box model works differently in horizontal and vertical directions. 
Essentially, widths are input to the algorithm and heights are output.  The
width of the BODY element is the width of its containing block, not the width of
its content.  See chapter 10 of CSS 2.1.

Comment 7

[Duncan]

Sorry, I don't mean to have a big argument, but I've read the relevant section
and cited the point where it says this container block is implementation-defined.

I was wrong to say horizontal and vertical behaviours should be alike, but the
horizontal behaviour is nonetheless illogical.  Look at my screenshot and tell
me what the background is positioned at the right edge of.

How can the width of the root container box be less than the width of the used
canvas?

Comment 8

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

The alternative you propose doesn't make sense.  If the with of BODY increases
when one thing in it overflows widthwise, then that would mean all text would
require a horizontal scrollbar to read.  i.e.,
http://www.mozilla.org/roadmap.html , with a narrow window, would have every
single line of text require horizontal scrolling because there's a big image 3/4
of the way down the document.

Comment 9

[Duncan]

OK, I see your point.  Unfortunately for me this means there is currently no
CSSly-correct way to position a background (or anything else) relative to the
occupied canvas.

For the time being I'll do it wrong and get the behaviour I want in Mozilla 1.6
and below, Opera and IE.  I'll wait and see if CSS3POS provides a right way to
do it.

Sorry to waste your time.

NOTABUG ;-)