Gradient background in about:home is only one viewport height tall

RESOLVED FIXED in Firefox 14

Status

()

Firefox
General
RESOLVED FIXED
5 years ago
4 years ago

People

(Reporter: Justin Lebar (not reading bugmail), Assigned: fryn)

Tracking

unspecified
Firefox 14
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox13-)

Details

Attachments

(3 attachments, 1 obsolete attachment)

(Reporter)

Description

5 years ago
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.
(Reporter)

Comment 1

5 years ago
Created attachment 616013 [details]
Screenshot 1
(Reporter)

Comment 2

5 years ago
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.
(Assignee)

Comment 3

5 years ago
Re-adding background-attachment: fixed; fixes this specific issue, but it's not actually what we want. (Also, that would regress bug 740235.)
(Assignee)

Comment 4

5 years ago
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. :)
Attachment #616051 - Flags: review?(dao)
(Assignee)

Updated

5 years ago
Summary: Dark background in about:home does not extend past bottom of first screen-height → Gradient background in about:home is only one viewport height tall
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
Attachment #616051 - Flags: review?(dao) → review-

Updated

5 years ago
OS: Mac OS X → All
(Assignee)

Comment 6

5 years ago
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.
Assignee: nobody → fryn
Attachment #616051 - Attachment is obsolete: true
Status: NEW → ASSIGNED
Attachment #616915 - Flags: review?(dao)
(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.

Updated

5 years ago
Attachment #616915 - Flags: review?(dao) → review+
(Assignee)

Comment 8

5 years ago
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.
Attachment #616915 - Flags: approval-mozilla-aurora?
(Assignee)

Comment 9

5 years ago
Thanks for the review.

https://hg.mozilla.org/integration/fx-team/rev/1eaf11b3cb5f
Blocks: 740235
Whiteboard: [fixed-in-fx-team]
https://hg.mozilla.org/mozilla-central/rev/1eaf11b3cb5f
Status: ASSIGNED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 14
Attachment #616915 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
tracking-firefox13: --- → +
This is very minor UI polish - no need to track for release.
tracking-firefox13: + → -
You need to log in before you can comment on or make changes to this bug.