Why in this example is the vertical scrollbar double-sized, but not the horizontal scrollbar?
<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 horizontal scrollbar should have the same relationship as the vertical scrollbar.
How does this happen in chrome, safari and firefox, I assume that this behavior is written in some standard? Here is the fiddle:
http://jsfiddle.net/v2xhj3kw/
source
share