[css-overflow] Clarify the contribution of untransformed direct descendant box

[stevennovaryo]

The current implementations of scrollable overflow seems to be quite quirky and specific in terms of direct descendant contribution. Where it would consider the untransformed box of direct descendant, As shown in this example. With the untransformed box of non-direct descendant being omitted, shown by this example. Meanwhile, the scrollable overflow implementations is ignoring the untransformed box in case the box is absolute positioned while the parent element established absolute positioned containing block, shown here.

This quite particular behavior however, is not specifically defined or mentioned in scrollable overflow definition. I believe it would be good to have a consistent behavior for this case, maybe omitting the untransformed box since scrollable overflow are supposed to show till the farthest corner of descendant anyway. Or, an additional explanation for these behavior.

cc: @xiaochengh @Loirooriol

[Loirooriol]

I don't trust jsfiddle to keep hosting the examples

Example 1

.container {
  width: 150px;
  height: 150px;
  overflow: scroll;
  background: silver;
  border: solid thick;
}

.element {
  width: 200px;
  height: 200px;
  background: lime;
}

.element-2 {
  width: 100px;
  height: 100px;
}

  <div class="container">
    <div style="transform: translate(-50%, -50%);" class="element">
    </div>
  </div>

Example 2

.container {
  width: 150px;
  height: 150px;
  overflow: scroll;
  background: silver;
  border: solid thick;
}

.element {
  width: 200px;
  height: 200px;
  background: lime;
}

.element-2 {
  width: 100px;
  height: 100px;
}

<div class="container">
  <div style="width: 150px; height: 150px;">
    <div style="transform: translate(-50%, -50%);" class="element">
    </div>
  </div>
</div>

Example 3

.container {
  width: 150px;
  height: 150px;
  overflow: scroll;
  background: silver;
  border: solid thick;
}

.element {
  width: 200px;
  height: 200px;
  background: lime;
}

.element-2 {
  width: 100px;
  height: 100px;
}

  <div class="container" style="position: relative;">
    <div style="transform: translate(-50%, -50%); position: absolute;" class="element">
    </div>
  </div>