[csswg-drafts] [css-transforms-2] the reference box for resolving percentage on translate (#4193)

BorisChiou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-transforms-2] the reference box for resolving percentage on translate ==
Per the spec definition of [`translate`](https://drafts.csswg.org/css-transforms-2/#propdef-translate), we resolve its percentage by _containing block_:
> relative to the width of the containing block (for the first value) or the height (for the second value) 

Here, we use _containing block_. However, for [`transform`](https://drafts.csswg.org/css-transforms-1/#transform-property) property, we use its [reference box](https://drafts.csswg.org/css-transforms-1/#reference-box) to resolve the percentage:
> refer to the size of reference box

The _containing block_ has a special meaning, I think, based on the spec of [visual formatting model](https://drafts.csswg.org/css2/visudet.html#containing-block-details). It may refer to the content edge or padding edge, based on its `position` value. I checked the implmentation of Blink and Gecko, and it seems both use `trasnform-box` (default: view-box) as the reference box for both `transform` and `translate`. So my suggestion is to update how we resolve the percentage for `translate`. i.e. Use _reference box_, instead of _containing block_.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4193 using your GitHub account

Received on Tuesday, 13 August 2019 21:48:36 UTC