552698 - Gradient backgrounds on root element use its size for sizing

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[Ryan]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 GTB6 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 GTB6 (.NET CLR 3.5.30729)

generally when you set a background-image on the body element, the background image will overflow outside of its border (apparent in the case where the body is smaller than the height of the viewport).  the same happens with a background-color of the body.  However with the new -moz-linear-gradient, the gradient only extends to bottom border of the body creating a 'chopped off' effect.  It actually seems to me that the way -moz-linear-gradient renders is more technically correct... but since they are both methods of 'background-image', it seems they should render the same.

Reproducible: Always

Comment 1

[(mostly gone) XtC4UaLL [:xtc4uall]]

can you attach a testcase using "Add an attachment" to this report showing your issue?

Comment 2

[Ryan]

Attachment: gradient on html element

html {
background-repeat: repeat; 
background-color: #ccc;
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 800px) ;
border: solid 1px green; 
}

body {
border: solid 1px blue; 
color: #000;
overflow-y: scroll;
}

Comment 3

[Ryan]

Attachment: gradient on html element (expected results)

html {
background-repeat: repeat; 
background-color: #ccc;
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 800px) ;
border: solid 1px green; 
min-height: 100%; 
}

body {
border: solid 1px blue; 
color: #000;
overflow-y: scroll;
}

Comment 4

[Ryan]

Attachment: gradient on html element repeat-x

html {
border: solid 1px green; 
background-repeat: repeat-x; 
background-color: #ccc;
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 800px) ;
}

body {
border: solid 1px blue; 
color: #000;
overflow-y: scroll;
}

Comment 5

[Ryan]

the same results are achieved if the background is in the body as opposed the the html.  i put the background styles in the html because it has better cross browser results except for the min-height property not working in Opera.  

It looks like the repeat height is taken from the height of the element the gradient is used on, which is generally fine...except for use on the html/body.

Comment 6

[Boris Zbarsky [:bzbarsky]]

> It looks like the repeat height is taken from the height of the element the
> gradient is used on

Yes, that's exactly what the spec says to do, as far as I can see.  From http://www.w3.org/TR/css3-background/#special-backgrounds :

  The background of the root element becomes the background of the canvas and
  its background painting area  extends to cover the entire canvas, although any
  images are sized and positioned relative to the root element as if they were
  painted for that element alone. (In other words, the background positioning
  area is determined as for the root element.)

Note the "sized" part above.  

That said, the part about linear gradients being infinite as defined in http://dev.w3.org/csswg/css3-images/#linear-gradients might be a confounding factor...  roc, any idea what the intent is there?

Comment 7

[Boris Zbarsky [:bzbarsky]]

Elika, you seem to be an editor for this stuff too...

Comment 8

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

I think this is a known problem in the spec, but it may be hard to fix without breaking other stuff.

Making the root element min-height:100% fixes the problem by the way.

Comment 9

[Ryan]

i see what you mean by the height taking the size from the root element...but still shouldn't the "repeat height" (meaning the declaration in the -moz-linear-gradient style and not the elements clipped height represented by the green box in my example) not be affected by this unless that value is set to a percentage?

in this case it actually drew the gradient differently based on the size of the element, instead of just clipping it to be the size of the element (if i'm explaining myself well)

now that i think about it, it might be happening for all elements where the element height ends up being less than the "repeat height" specified for the gradient.  the effect can probably better be seen with multiple colors

Comment 11

[paolo]

it may be obvious, but i just found out that for the gradient to kick in, the html root element must NOT be absolute-positioned:

html {
background-image: -moz-linear-gradient(center bottom , #757, #ecc);
[min-]height: 100%;
position: absolute;  // does not work, it turns all off
}

why absolute*? revert to static and all works as expected:

html {
background-image: -moz-linear-gradient(center bottom , #757, #ecc);
[min-]height: 100%;
position: static;    // DOES work, it turns all off
}

*...lazy me, in setting 1 CSS-rule for both html and body for their most common properties i included that *position:absolute* - later, splitting them for CMS purposes and targeting the html element behind the body, i was not getting my gradient, even if it already had a 100% height...

Comment 12

[Boris Zbarsky [:bzbarsky]]

That's quite odd.  Was your body absolutely positioned too?  If so, was your real problem that the <html> was getting 0 width?

Comment 13

[paolo]

boris, [sorry for this late reply], 
both html and body were absolutely positioned, but i don't think it has to do with 0-width-html or the main concern here (the gradient extending accordingly to the html-element-height - for that in my case the height is already setted at 100%), as the contents were still all there: just the gradient didn't show up -

so, the minimal complete code to illustrate it (firefox 10):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{
background:#fff -moz-linear-gradient(#757, #ecc);
/* position:absolute /* uncomment to make the gradient disappear */
}
</style>
</head>
</html>

Comment 14

[Boris Zbarsky [:bzbarsky]]

> but i don't think it has to do with 0-width-html

It may, because the gradient would have been 0-width too, not matter what the height.

Comment 15

[paolo]

oh, sure, i found a flaw in my tests and now i see your point: firefox adds the BODY element and sets display:block for both BODY and HTML -
so now, setting a display:none rule for BODY (or playing with firebug, if i can trust it) i must add the height declaration for HTML to see something (1 or more stripes depending on the value, the whole point in this "bug") -

still, the position:[what] issue remains, as [absolute] (or [fixed]) will make the gradient disappear (or the whole document collapse) - not really an issue but for whoever *accidentally* changes it, like me -- or are there legitimate purposes of doing so?