Resizing the window breaks the header/footer layout

VERIFIED WONTFIX

Status

VERIFIED WONTFIX
9 years ago
9 years ago

People

(Reporter: krupa.mozbugs, Unassigned)

Tracking

unspecified
x86
All

Details

Attachments

(2 attachments)

(Reporter)

Description

9 years ago
Created attachment 392610 [details]
header 

Steps to reproduce:

1.Navigate to MCC homepage
2.resize the window
3.Scroll to the end of the page


observed behavior:
header and footer layouts look broken(fixed width CSS?)
(Reporter)

Comment 1

9 years ago
Created attachment 392612 [details]
footer
This is the expected built-in browser behavior.

The body element is sized to the window, but its contents have a fixed width that may overflow the window. When overflow occurs, the browser produces scrollbars but doesn't expand the containing elements horizontally around the content (the content overflows its box according to spec). The background image/color doesn't continue outside the window area, even though the content does. You can scroll to see the content but the background gives a visual indicator of where the container ends and the overflow begins.

Using overflow-x: hidden; prevents horizontal scrolling, but that means the content is hidden in small windows as well, which is almost certainly unacceptable. A fully-liquid layout does evade the issue because the content simply never overflows horizontally, but this isn't a liquid design. 

So unfortunately this is pretty much unfixable without altering the design and rethinking things for liquidity. It's preferable for the main content area to remain readable in horizontal scrolling scenarios, even if the header and footer appear broken.
Resolving as a wont fix based on comment #2 (In reply to comment #2)
> This is the expected built-in browser behavior.
> 
> The body element is sized to the window, but its contents have a fixed width
> that may overflow the window. When overflow occurs, the browser produces
> scrollbars but doesn't expand the containing elements horizontally around the
> content (the content overflows its box according to spec). The background
> image/color doesn't continue outside the window area, even though the content
> does. You can scroll to see the content but the background gives a visual
> indicator of where the container ends and the overflow begins.
> 
> Using overflow-x: hidden; prevents horizontal scrolling, but that means the
> content is hidden in small windows as well, which is almost certainly
> unacceptable. A fully-liquid layout does evade the issue because the content
> simply never overflows horizontally, but this isn't a liquid design. 
> 
> So unfortunately this is pretty much unfixable without altering the design and
> rethinking things for liquidity. It's preferable for the main content area to
> remain readable in horizontal scrolling scenarios, even if the header and
> footer appear broken.
Status: NEW → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → WONTFIX
(Reporter)

Comment 4

9 years ago
verified based on comment 1
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.