923838 - document.body.clientHeight incorrect.

Status: RESOLVED INACTIVE

(Firefox for Android Graveyard :: General, defect)

Description

[Greg Peters]

Attachment: Screenshot_2013-10-05-16-01-17.png

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.66 Safari/537.36

Steps to reproduce:

Created a simple page layout with 3 rows. A header, a content area, a footer. The content area is a div that resizes when the window.onresize event is fired. The content areas height is then set to document.body.clientHeight.


Actual results:

document.body.clientHeight includes the height of the address bar.


Expected results:

document.body.clientHeight should not include the height of the address bar. Why? because it's impossible to create a full screen web page that includes the address bar at the top. The document should not scroll.

Comment 1

[Kartikaya Gupta (email:[e-mail])]

Please attach the HTML for your test page as well. Thanks.

Comment 2

[Greg Peters]

Attachment: clientHeight bug source

I expect to see address bar all the time without any scrolling on the outer document.

Comment 3

[Kartikaya Gupta (email:[e-mail])]

Yeah, so unfortunately the way our toolbar hiding thing works, it's conceptually "on top" of the page, rather than "pushing the page down". This means the height of the page is actually the height of the visible area including the toolbar.

However, we do also have special handling for really short pages, so that pages that are shorter than the visible area minus the toolbar height are not scrollable. You can take advantage of this fact to make your page not scrollable. I took your page and modified it so that the content div starts out with a zero height rather than its full height. This means when we first do layout, we find the total page height to be really short, and so we size the CSS viewport to prevent scrolling. Then you can resize the content in script to take up the remaining space.

My modified version is at https://people.mozilla.org/~kgupta/bug/923838.html - the only thing I changed is adding "height:0" to the content div's style, and also setting the height to zero in the onresize handler before re-running setDocumentHeight(). I think this should be an acceptable solution; you can reduce the timeout to make it look better. Let me know if this works for you or if there are other use cases that you'd like to handle that this doesn't cover.

Comment 4

[Greg Peters]

This works great. The only other use case is changing to horizontal view. onresize is never called and window.addEventListener('orientationChange') is not supported. I wrote a media query to fix when the device changes from portrait to landscape. My code works in all mobile browsers now, but I don't like having if(firefoxMobile()) in my code.

Comment 5

[Kartikaya Gupta (email:[e-mail])]

(In reply to Greg Peters from comment #4)
> This works great. The only other use case is changing to horizontal view.

I'm not sure what you mean here. Do you mean rotating the device? onresize should be getting called for this - if it's not please attach a test case that demonstrates the problem. In the modified version I posted in comment 3 I believe rotation was working fine.

> onresize is never called and window.addEventListener('orientationChange') is
> not supported. I wrote a media query to fix when the device changes from
> portrait to landscape. My code works in all mobile browsers now, but I don't
> like having if(firefoxMobile()) in my code.

I would also like to avoid having if(firefoxMobile()) in your code :)

Comment 6

[Mira Lobontiu (Android QA)]

Hi Greg,

Are you still encountering the issue?

Thanks!

Comment 7

[Firefox Bug Husbandry Bot]

Closing per https://bugzilla.mozilla.org/show_bug.cgi?id=1473195

Contact :susheel if you think this bug should be re-opened