Bug 44398 – getComputedStyle height/width substracts scrollbar size

• Status: NEW
• Component: CSS

[doum-ti-di-li-doom]

If an element has overflowing content and its overflow property is set to auto/scroll, querying the height/width property using getComputedStyle() will substract the scrollbar width/height from the actual element dimensions

Firefox/Opera
report 100x150

Safari/Chrome/Iron/Konqueror
report 83x133

* Windows 7 scrollbar is 17 pixels wide

[doum-ti-di-li-doom]

Created attachment 65059 [details]
Test case

[Ahmad Saleem]

This bug was reported on Windows but I don't have it but these are results on macOS 12.5 as of today:

*** Safari 15.6 on macOS 12.5 ****

85 * 135

Scrollbar behavior - to be always visible in macOS (it it matters)


*** Chrome Canary 105 ****

85 * 135

*** Firefox Nightly 104 ****

100 * 150

_______

I am not sure, which behavior is correct or which one should be followed but Safari and Chrome are reporting different compared to Firefox. (On other note - should component be JavaScript Core?). Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/97496284>

[Karl Dubost]

Created attachment 461185 [details]
adding getBoundingClientRect to the computation


The original element is 100x150px
when the scrollbars are not displayed the reported size is 100x150px

Activating on macOS the always on scrollbar 
And the results are as mentioned in the bug report.

Safari
17px height/width scrollbar

Chrome 
15px height/width scrollbar

Firefox 
doesn't subtract the scrollbar size.

BoundingClientRect is giving 100px by 150px for all browsers.

[Karl Dubost]

Firefox
GetComputedStyle:          Width: 100px Height: 150px
BoundingClientRect         Width: 100px Height: 150px
clientWidth/clientHeight:  Width: 85px  Height: 135px

Chrome/Safari:
GetComputedStyle:          Width: 85px  Height: 135px
BoundingClientRect         Width: 100px Height: 150px
clientWidth/clientHeight:  Width: 85px  Height: 135px


In https://drafts.csswg.org/cssom-view/#dom-element-clientwidth

> Return the width of the padding edge 
>   **excluding the width of any rendered scrollbar** 
> between the padding edge and the border edge, 
> ignoring any transforms that apply to the element 
> and its ancestors.

so this is clear. 

First of all 
https://drafts.csswg.org/css-overflow-3/#scrollbar-gutter-property

> The space between the inner border edge and the outer padding edge which user agents may reserve to display the scrollbar is called the scrollbar gutter.

Then

> Whether classic scrollbars or overlay scrollbars are used, the appearance and size of the scrollbar, and whether scrollbars appear on the start or end edge of the box, is UA defined.


but nothing is said on how it affects the reported width of the container. 

That said I'm not sure this is fixable in any way both for Firefox and Safari/Chrome without unleashing webcompat hell on the Web.

It's better to use getBoundingClientRect and clientWidth for these.