Last Comment Bug 576976 - Element.scrollHeight: DOES NOT include padding for text area's, DOES include border for div's?
: Element.scrollHeight: DOES NOT include padding for text area's, DOES include ...
Status: NEW
:
Product: Core
Classification: Components
Component: Layout: Form Controls (show other bugs)
: Trunk
: All All
: -- normal with 3 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
: Jet Villegas (:jet)
Mentors:
: 740670 (view as bug list)
Depends on: 157846
Blocks:
  Show dependency treegraph
 
Reported: 2010-07-05 07:05 PDT by Aris
Modified: 2012-12-17 12:13 PST (History)
9 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
Scroll height examples for text area / div (1.11 KB, text/html)
2010-07-05 07:06 PDT, Aris
no flags Details
testcase: show difference between clientHeight and scrollHeight (1.30 KB, text/html)
2010-12-20 04:07 PST, arno renevier
no flags Details

Description Aris 2010-07-05 07:05:35 PDT
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6

The property element.scrollHeight does not include padding of a text area, but for a div it includes both padding AND border. This is not according to the documentation at https://developer.mozilla.org/en/DOM/element.scrollHeight

Reproducible: Always

Steps to Reproduce:
1. Use a text area with padding.
2. Compute the scroll height.
Actual Results:  
Scroll height = height, but not including padding.

Expected Results:  
Scroll height should be height including padding.

For a div, the situation is again different: border seems to be included there as well.
Comment 1 Aris 2010-07-05 07:06:59 PDT
Created attachment 456053 [details]
Scroll height examples for text area / div

Click the text area / div to view computed scroll height values.
Comment 2 arno renevier 2010-12-20 04:06:35 PST
I can see the same behaviour. scrollHeight includes height + padding + border.
clientHeight includes heigth + padding.

So, clientHeight is not the same as scrollHeight for non scrollable elements.

Opera behaves the same way as firefox, while webkit behaves the same way as described in the documentation.
I'll attach another testcase
Comment 3 arno renevier 2010-12-20 04:07:11 PST
Created attachment 498711 [details]
testcase: show difference between clientHeight and scrollHeight
Comment 4 Mike "Pomax" Kamermans [:pomax] 2011-03-04 18:16:47 PST
This behaviour also makes it impossible to ascertain whether or not overflow has occurred in a div, because even an empty div with a fixed height of, say, 123px will report a clientHeight of 123px but a scrollHeight of 123 + border-top + border-bottom, which is the only way to test whether or not overflow has occurred.

problem touches on what was filed at http://code.google.com/p/chromium/issues/detail?id=74999
Comment 5 Mounir Lamouri (:mounir) 2012-03-30 10:11:15 PDT
*** Bug 740670 has been marked as a duplicate of this bug. ***
Comment 6 Mounir Lamouri (:mounir) 2012-03-30 10:13:46 PDT
Boris, could that be related to bug 157846?
Comment 7 Mounir Lamouri (:mounir) 2012-03-30 10:14:39 PDT
Better if I CC him...

Boris, could you look at comment 6? :)
Comment 8 Boris Zbarsky [:bz] (still a bit busy) 2012-04-09 20:39:48 PDT
Seems plausible, yes.  We really need a spec for form controls....
Comment 9 Kartikaya Gupta (email:kats@mozilla.com) 2012-06-08 10:14:18 PDT
See related: bug 735646. It has patches that change scrollHeight to not include the border. That should fix half of this bug (the div half, not the textarea half).
Comment 10 Kartikaya Gupta (email:kats@mozilla.com) 2012-06-21 06:51:04 PDT
Oops, I meant bug 755971. That has landed on inbound now, but I'll leave this open since I'm not sure if there are other unresolved issues here.

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