<table>
<tr style="transform: rotate(10deg)">
<td>
<div style="position: absolute">ABSOLUTE</div>
</td>
</tr>
</table>
According to spec:
- https://www.w3.org/TR/css-transforms-1/:
- an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS2]
- For elements whose layout is governed by the CSS box model, any value other than none for the transform also causes the element to become a containing block
The tr should establish a containing block for the absolute-position descendant.
Currently we don't treat the tr as the containing block, but we do apply the transform to the absolute-position descendant. The current behavior is inconsistent about how the transform applies to descendants, and it's also hard to implement this behavior in SPv175 (see bug 804467 ).
Test case: http://jsbin.com/cemigih
Compatibility analysis:
Other browsers:
- Edge: doesn't support transform on tr.
- Firefox: treat transformed tr as the containing block of out-of-flow positioned descendants.
Real-world usage: zero usage[1] in 100k top pages (https://ct.skia.org/results/cluster-telemetry/tasks/benchmark_runs/wangxianzhu-20180122213656/consolidated_outputs/wangxianzhu-20180122213656.output)
[1] Criterion: object.StyleRef().CanContainFixedPositionObjects() && !object.CanContainFixedPositionObjects().
Comment 1 by chrishtr@chromium.org
, Jan 23 2018Status: Assigned (was: Available)