754081 - WebFWD.org website has large white space at bottom of page - rendering issue

Status: RESOLVED INVALID

(Firefox for Android Graveyard :: General, defect)

Description

[Jane Finette]

Web page or screen you were on when you saw the issue: 
https://webfwd.org/


WebFWD.org website has large white space at bottom of page - looks like the page isn't rendering properly. Looks fine in other mobile browsers

Comment 1

[Aaron Train [:aaronmt]]

Hey Jane,

I don't see this on my device, Samsung Galaxy Nexus (Android 4.0.4). Which device, and build were you testing? Also can you attach a screenshot of what you see?

Comment 2

[Jane Finette]

Attachment: WebFWD homepage displayed on Fx Aurora / Nexus S

Hi there

I have a Nexus S - GT-19020T and running the latest Aurora build. 

Attached is a screen shot. 

Thanks
Jane

Comment 3

[Matt Brubeck (:mbrubeck)]

I don't think this is a bug; the site looks the same in a desktop browser that is very tall and narrow.  The bottom bar is intentionally styled to position itself at the bottom of the window.

Comment 4

[Jane Finette]

Hi Matt -- adding Pascal to the bug. The website looks different on Firefox desktop to Mobile.

Comment 5

[Pascal Finette [:pfinette]]

Hi Matt,

The site renders properly on iOS (iPhone & iPad) - i.e. without all that whitespace.

Comment 6

[Matt Brubeck (:mbrubeck)]

I don't have an iOS device right now, but the rendering in the stock (webkit) Android 2.3 Browser on my phone in portrait orientation is the same as Fennec.  I'm curious to see how it is different in Safari on a portrait iPhone screen.

The rendering in a tall desktop browser window has the same whitespace too.  On a typical phone display in portrait orientation, Fennec lays out the site exactly like a desktop Firefox window that is 980px wide * 1400px high.  This is similar to a desktop monitor that has been rotated to portrait orientation.  If you resize a desktop Firefox or Chrome window to those dimensions, it looks just like the Fennec screenshot.

The reason for the whitespace is this script, which sets the minimum height of the main body container (".wrapper") equal to the window height minus the footer height.  In other words, it explicitly adds whitespace to ensure that the footer is at the bottom of the screen:

https://webfwd.org/media/js/functions.min.js