Does the conversion scale on a child cause an abnormal scroll overflow to occur?

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>

enter image description here

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/

+4
source share
1 answer

The window model adds properties to the parent element.

height: auto;

- This property causes an increase in height.

0
source

All Articles