What causes the vertical scrollbar to increase in size in this situation while the horizontal scrollbar remains unaffected?
<div style="width:200px; height: 200px; overflow:scroll">
<div style="width: 400px; height: 400px; background-color:orange; transform: scale(.5, .5); -webkit-transform: scale(.5, .5); transform-origin: 0 0; -webkit-transform-origin: 0 0;">
TEST TEXT 1 TEST TEXT 2 TEST TEXT 3 TEST TEXT 4 TEST TEXT 5 TEST TEXT 6 TEST TEXT 7 TEST TEXT 8
</div>
</div>
The ratio of the horizontal scrollbar should ideally match that of the vertical scrollbar.
Given that this behavior is observed in Chrome, Safari, and Firefox, it implies that it may be documented in a programming standard. You can view an example here: http://jsfiddle.net/v2xhj3kw/