576976 - Element.scrollHeight: DOES NOT include padding for text area's, DOES include border for div's?

Status: RESOLVED WORKSFORME

(Core :: Layout: Form Controls, defect)

Description

[u283834]

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

[u283834]

Attachment: Scroll height examples for text area / div

Click the text area / div to view computed scroll height values.

Comment 2

[arno renevier]

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]

Attachment: testcase: show difference between clientHeight and scrollHeight

Comment 4

[Pomax]

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 6

[Mounir Lamouri (:mounir)]

Boris, could that be related to bug 157846?

Comment 7

[Mounir Lamouri (:mounir)]

Better if I CC him...

Boris, could you look at comment 6? :)

Comment 8

[Boris Zbarsky [:bzbarsky]]

Seems plausible, yes.  We really need a spec for form controls....

Comment 9

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

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:[e-mail])]

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.

Comment 11

[Pomax]

does this bug need to still be open after 5 years of nothing happening? =)

Comment 12

[Boris Zbarsky [:bzbarsky]]

Yes, because we still need to get a spec written for this stuff.

Comment 13

[Pomax]

Hm, that sounds like it would be more valuable to start a new bug for working on fleshing out a spec, with a bug title appropriate to that work, while closing (or blocking) this very specific bug that isn't going to get "fixed" until an adopted spec exists.

Comment 14

[Boris Zbarsky [:bzbarsky]]

The spec bug needs to go in <https://github.com/w3c/csswg-drafts/labels/cssom-view-1>.

As for this bug, I'm not sure what we gain by closing it.  At least this way we're aware there's a problem that needs resolving here, instead of sweeping it under the rug.

Comment 15

[Emilio Cobos Álvarez (:emilio)]

I'm technically not an editor of cssom-view, but I can take a look and help out.

Comment 16

[Emilio Cobos Álvarez (:emilio)]

That being said this bug is working for me. It's just that <textarea> uses box-sizing: border-box. This works the same way in WebKit and Blink too, afaict.

Comment 17

[Emilio Cobos Álvarez (:emilio)]

Relevant spec is https://drafts.csswg.org/cssom-view/#scrolling-area, which looks roughly ok to me, though need to look closer.