Last Comment Bug 746466 - Gradient background in about:home is only one viewport height tall
: Gradient background in about:home is only one viewport height tall
Status: RESOLVED FIXED
:
Product: Firefox
Classification: Client Software
Component: General (show other bugs)
: unspecified
: All All
: -- normal (vote)
: Firefox 14
Assigned To: Frank Yan (:fryn)
:
Mentors:
Depends on:
Blocks: 711157 740235
  Show dependency treegraph
 
Reported: 2012-04-17 22:02 PDT by Justin Lebar (not reading bugmail)
Modified: 2013-11-13 02:19 PST (History)
5 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---
-


Attachments
Screenshot 1 (182.56 KB, image/png)
2012-04-17 22:05 PDT, Justin Lebar (not reading bugmail)
no flags Details
Screenshot 2 (135.45 KB, image/png)
2012-04-17 22:06 PDT, Justin Lebar (not reading bugmail)
no flags Details
patch (5.56 KB, patch)
2012-04-18 01:58 PDT, Frank Yan (:fryn)
dao+bmo: review-
Details | Diff | Review
patch v2 (1.13 KB, patch)
2012-04-20 03:17 PDT, Frank Yan (:fryn)
dao+bmo: review+
gavin.sharp: approval‑mozilla‑aurora+
Details | Diff | Review

Description Justin Lebar (not reading bugmail) 2012-04-17 22:02:48 PDT
STR: Open about:home.  Resize your window so it's short, and a vertical scroll bar appears in the about:home tab.  Scroll down to the bottom of the page.

Notice that the dark gray bar ends one screen-height from the top of the page.  It should instead extend all the way down to the bottom of the page.
Comment 1 Justin Lebar (not reading bugmail) 2012-04-17 22:05:54 PDT
Created attachment 616013 [details]
Screenshot 1
Comment 2 Justin Lebar (not reading bugmail) 2012-04-17 22:06:40 PDT
Created attachment 616014 [details]
Screenshot 2

If you make the window short enough, it looks like two background layers overlap, and more fun things happen.
Comment 3 Frank Yan (:fryn) 2012-04-17 22:13:46 PDT
Re-adding background-attachment: fixed; fixes this specific issue, but it's not actually what we want. (Also, that would regress bug 740235.)
Comment 4 Frank Yan (:fryn) 2012-04-18 01:58:36 PDT
Created attachment 616051 [details] [diff] [review]
patch

Actually, the -moz-linear-gradient in the background-image isn't extending beyond the first screen height.

Moving the background-color and background-image values from html to body doesn't help, even with background size: 100% 100% for the gradient, because background sizes on body and html don't seem to follow the actual computed heights of the body and html elements, as a strange special case.

My solution was to bring back the #container div and set the backgrounds on that. It's not pretty, but it works without regressing bug 740235. If you have a better solution, it is welcome. :)
Comment 5 Dão Gottwald [:dao] 2012-04-18 06:46:55 PDT
Comment on attachment 616051 [details] [diff] [review]
patch

> Moving the background-color and background-image values from html to body doesn't help

seems to work just fine over here
Comment 6 Frank Yan (:fryn) 2012-04-20 03:17:03 PDT
Created attachment 616915 [details] [diff] [review]
patch v2

(In reply to Dão Gottwald [:dao] from comment #5)
> > Moving the background-color and background-image values from html to body doesn't help
> 
> seems to work just fine over here

Did you move both?
Moving only background-image works, but it seems that also moving background-color causes the background-color only to be painted for the first viewport height.

Setting backgrounds on body is bizarrely handled. See the following testcase:

data:text/html,<style>body { background-image: -moz-linear-gradient(cyan,cyan); border: 10px solid #000; }</style><body><script>document.body.innerHTML=getComputedStyle(document.body).height</script></body>

The computed height of <body/> is 0px and the border is drawn as expected, but the cyan background gets painted over the whole viewport.
Comment 7 Dão Gottwald [:dao] 2012-04-20 03:37:43 PDT
(In reply to Frank Yan (:fryn) from comment #6)
> Created attachment 616915 [details] [diff] [review]
> patch v2
> 
> (In reply to Dão Gottwald [:dao] from comment #5)
> > > Moving the background-color and background-image values from html to body doesn't help
> > 
> > seems to work just fine over here
> 
> Did you move both?

I think I moved background-image only.
Comment 8 Frank Yan (:fryn) 2012-04-20 11:40:30 PDT
Comment on attachment 616915 [details] [diff] [review]
patch v2

[Approval Request Comment]
Regression caused by: Bug 740235
User impact if declined: Visual defect accidentally introduced by bug 740235, which got aurora approval.
Testing completed: Locally tested.
Risk to taking this patch: None.
String changes made by this patch: None.
Comment 9 Frank Yan (:fryn) 2012-04-20 11:41:19 PDT
Thanks for the review.

https://hg.mozilla.org/integration/fx-team/rev/1eaf11b3cb5f
Comment 10 Tim Taubert [:ttaubert] 2012-04-20 23:37:50 PDT
https://hg.mozilla.org/mozilla-central/rev/1eaf11b3cb5f
Comment 11 Alex Keybl [:akeybl] 2012-05-01 10:27:47 PDT
This is very minor UI polish - no need to track for release.

Note You need to log in before you can comment on or make changes to this bug.