Last Comment Bug 189112 - implement document.clientWidth and document.clientHeight just like Safari
: implement document.clientWidth and document.clientHeight just like Safari
Status: RESOLVED WONTFIX
wontfix?
:
Product: Core
Classification: Components
Component: DOM (show other bugs)
: Trunk
: All All
: -- normal with 4 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2003-01-14 14:51 PST by Garrett Smith
Modified: 2013-04-04 13:53 PDT (History)
4 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
test case showing document.clientWidth and document.clientHeight (2.00 KB, text/html)
2003-01-14 19:28 PST, Garrett Smith
no flags Details
Testcase (978 bytes, text/html)
2003-01-14 19:52 PST, Garrett Smith
no flags Details

Description Garrett Smith 2003-01-14 14:51:34 PST
window.innerWidth/Height includes scrollbars, if present. 

Web designers and UI developers sometimes need to know the viewable dimensions
of the viewport. These dimensions do not include the scrollbars.

It is not appropriate to modify the values returned by window.innerWidth/Height
so that said values exclude scrollbars because to do so would change/break
programs that rely upon this.

For these reasons, it is necessary to add a new property that will return the
width excluding scrollbars and all other chrome. This will ensure both forward
and backward compatibility. No sites will break. It is a small but necessary
feature to add.


I propose mozilla support:
// width of the initial containing block (the viewport) excluding any scrollbars.

document.clientWidth
// height of the initial containing block (the viewport) excluding any scrollbars.
document.clientHeight


                              Q & A 
 --------------------------------------------------------------------          
                 
Q: What about document.height and document.width?
 
The values returned from these properties vary between browsers. Mozilla gives
measurements from the body. document.height measures the height of the
documentElement in safari and the height of the body in Mozilla --not the viewport.
document.width measures the the width of the viewport in safari and the width of
the body in Mozilla.

http://www.mozilla.org/docs/dom/domref/dom_doc_ref41.html
describes different behavior. 


Q: bug 156388 says that the viewport should be measured by
documentElement.clientHeight.

documentElement.clientHeight returns 0 in Mozilla. It does not return the
clientHeight of the root element which may be different from the height of the
viewport in Mozilla. Internet Explorer automatically sizes the root element so
that its outer dimensions (border, scrollbars if any) are inside the ICB
(initial containing block). 

Mozilla grants more flexibility to the root element. It allows the root to be
sized like any other block element. In Mozilla, the height of the viewport and
the height of the root element are completely unrelated. Since this is a
confusing matter to even above average web developers, returning 0 for
documentElement.clientHeight/Width allows conditional statements such as the
following to work:

if(document.documentElement.clientWidth) {

}
else if(document.body.clientWidth) {

}


The first statement will always fail in mozilla because 0 is converted to false
when a boolean value is expected.



Q: doesn't document.body.clientWidth/Height already give us the dimensions of
the viewport.

Yes, they do. This is a bug and should be fixed. The width of the body and the
width of the viewport may be totally unrelated. document.body.clientWidth does
not return the clientWidth of the body, but instead returns the width of the
viewport. This is definitely incorrect and should be fixed right away.

The correct implementation this feature will make it possible to measure the
initial containing block in Mozilla. This is a necessary feature.

See also:
bug 48634
bug 156388
Comment 1 Garrett Smith 2003-01-14 19:28:01 PST
Created attachment 111591 [details]
test case showing document.clientWidth and document.clientHeight

This only works in Safari
Comment 2 Garrett Smith 2003-01-14 19:52:33 PST
Created attachment 111592 [details]
Testcase
Comment 3 Boris Zbarsky [:bz] 2003-01-14 20:40:11 PST
wrong component.
Comment 4 Johnny Stenback (:jst, jst@mozilla.com) 2003-03-23 13:17:34 PST
Mass-reassigning bugs to dom_bugs@netscape.com
Comment 5 Adam Guthrie 2005-12-29 21:47:48 PST

*** This bug has been marked as a duplicate of 156388 ***
Comment 6 Garrett Smith 2006-04-25 16:31:13 PDT
this is not a duplicate.

Read the bug title closely.

we're looking for document.clientWidth. That would be the clientWidth of the ICB.

Bug 156388 is all about document.documentElement.clientWidth. That's the clientWidth of the documentElement. 

No surprise it got marked invalid. Hardly anyone seems to know the difference between the HTML element and the ICB. 

Comment 7 Shelby Moore 2010-09-10 23:43:18 PDT
Regardless whether this bug is fixed or not, the following code for obtaining the view size sans any scrollbar(s), should work:

https://bugzilla.mozilla.org/show_bug.cgi?id=156388#c14

I understand this bug report proposes a "fix" to document.body.client[Width|Height], so as to always report the <body> element's dimensions in the client (instead of the body's ICB, which is the viewport size sans any scrollbar(s)), which would thus also require adding document.client[Width|Height] to report the document's ICB.

Thus apparently what this bug fix will effectively gain is that the <body> element's true client[Width|Height] will be more readily accessible. Without this bug fix, I assume it is theoretically possible to obtain the equivalent by placing a <div style='margin:0 padding:0'> as the first child of a <body style='margin:0'>. This workaround should continue to function correctly even after this bug is fixed.
Comment 8 Shelby Moore 2010-09-10 23:59:48 PDT
On further thought, if the <body> element's margins are 0, then the document.body.Scroll[Width|Height] should provide the values expected for a fixed document.body.client[Width|Height].

If the <body> element's margins are not 0, adding their ComputedStyle values to the document.body.Scroll[Width|Height] should provide the values expected for a fixed document.body.client[Width|Height].
Comment 9 Shelby Moore 2010-09-11 07:19:19 PDT
After further study, I think this bug report is invalid, or should be marked as feature request instead:

https://developer.mozilla.org/en/Determining_the_dimensions_of_elements

The assertion that document.body.client[Width|Height] should not be the same as the viewport excluding (if any) scrollbar(s), is apparently wrong.

It appears that document.body.scroll[Width|Height] provides the size of the content of document body.

Thus apparently this bug report is only valid as a feature request to add document.client[Width|Height], but this unnecessary as I explained in Comment #7.
Comment 10 :Ms2ger (⌚ UTC+1/+2) 2011-01-11 07:34:44 PST
It looks like only WebKit supports this. I think we should wontfix. Jst?
Comment 11 Garrett Smith 2011-01-11 12:57:43 PST
Sounds right, at this juncture.

Seems documentElement.clientXXX properties now reflect viewport dimensions, not the dimensions of the root element.

If document.clientXXX had gone in 6 years ago, it would have made a big difference in the web today. And it should have.

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